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');
});

Answer 1

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…