Changing Background Image with JavaScript

Question

I have a background image being stretched to fit the entire screen. I am trying write a script that will change the background to another image. My current script does not stretch the image to fit the entire screen and instead centers the image. This problem occurs in Firefox, IE, and Opera. It seems that Chrome and Safari are unaffected. I followed this tutorial to create the full page background image.

CSS:

html {
    background: url(../img/01.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

JavaScript:

$('#previous').click(function() {
    $('html').css('background', 'url(img/01.jpg) no-repeat center fixed');
});

$('#next').click(function() {
    $('html').css('background', 'url(img/02.jpg) no-repeat center fixed');
});

Not sure if this would help, but have you tried setting the height and width to 100% for the html tag? — Chase
– Chase, Commented May 7, 2012 at 0:28

DaneSoul · Accepted Answer · 2012-05-07 00:33:34Z

3

What if try to say background-size directly in function?

$('#next').click(function() {
    $('html').css('background', 'url(img/02.jpg) no-repeat center fixed');
    $('html').css('background-size', 'cover');
});

Because I suppose that when background is changes, previouse background-size property may be not working for new image...

answered May 7, 2012 at 0:33

DaneSoul

4,5413 gold badges24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Try this , it worked for me.

CSS

    body {
    background-image: url('img/bg2.jpg');
    color: #000305;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    }
    
.body {
    clear: both; 
    margin: 0 auto; 
    width: 70%;
}

And in html I used the following script

 $(document).ready(function() {

 $("#tb").click(function() {
 var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(img/p2.jpg)';
    
  });

});

where tb is the button I used to change the background image.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 28, 2013 at 8:25

rusty

7221 gold badge7 silver badges21 bronze badges

Collectives™ on Stack Overflow

Changing Background Image with JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related