jQuery change DIV background with css()

Question

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}

$(window).scroll(function() {
	if (isScrolledIntoView('#window_1')) {
		$('#container').css('background', 'url(http://www.frasiaforismi.com/wp-content/uploads/2011/08/221368_220407157985347_131967240162673_902813_5241313_o.jpg) no-repeat center');
        $('#container').css('background-size', 'cover');
	}
	else if (isScrolledIntoView('#window_2')) {
		$('#container').css('background', 'url(http://media3.letsbonus.com/products/258000/258380/13960103441079-0-680x276.jpg) no-repeat center');
        $('#container').css('background-size', 'cover');
	}
});

#container {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: url('http://www.frasiaforismi.com/wp-content/uploads/2011/08/221368_220407157985347_131967240162673_902813_5241313_o.jpg') no-repeat center;
	background-size: cover;
    z-index: -1;
}

.section {
    position: relative;
    background-color: black;
    width: 100vw;
    height: calc(100vh + 200px);
    color: white;
    font-size: 30px;
    text-align: center;
}

.window {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-2.0.0b1.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <div class="section">
      <p>Scroll</p>
    </div>
    <div id="window_1" class="window"></div>
    <div class="section">
      <p>Scroll</p>
    </div>
    <div id="window_2" class="window"></div>
  </body>
</html>

I have a simple DIV with id="container" and I want to change background image when scrolling. Below is the jQuery code. Do not care about conditions in the if-else block.

$(window).scroll(function() {
    if (condition_1) {
        $('#container').css('background', 'url(../CSS/Images/image1.jpg) no-repeat center');
    }
    else if (condition_2) {
        $('#container').css('background', 'url(../CSS/Images/image2.jpg) no-repeat center');
    }
});

It works perfectly on Chrome and Safari. It does not work on IE11 and Firefox: they always show the white background in both conditions. Using developer tools on Chrome, IE11 and Firefox I verified that events are always fired correctly and css() is always executed. Despite this, I still have the white background only on IE11 and Firefox. I am not understanding why. How can I solve it? Could it be a jQuery compatibility issue or a jQuery bug? This is the jQuery library I am using: http://code.jquery.com/jquery-2.0.0b1.js

Can you reproduce the problem in a stack snippet or in jsFiddle? — apaul
– apaul, Commented Dec 1, 2014 at 1:08
I can't reproduce the problem in firefox developer edition 35.0a2. Which version of firefox do you use? — baao
– baao, Commented Dec 1, 2014 at 1:10

baao · Accepted Answer · 2014-12-01 01:56:14Z

1

I cant reproduce the issue you are having, but a working solution should be:

CSS:

#container {
    position: fixed;
    width: 100vw;
    height: 100vh;

    background-size: cover;
    z-index: -1;
}

.container-image {
  background: url('http://www.frasiaforismi.com/wp-content/uploads/2011/08/221368_220407157985347_131967240162673_902813_5241313_o.jpg') no-repeat center;
}

.container-replace-one {
     background: url(http://www.frasiaforismi.com/wp-content/uploads/2011/08/221368_220407157985347_131967240162673_902813_5241313_o.jpg) no-repeat center;
     background-size:cover;
 }

.container-replace-two {
   background: url(http://media3.letsbonus.com/products/258000/258380/13960103441079-0-680x276.jpg) no-repeat center; 
   background-size:cover;     
 }

HTML:

<div id="container" class="container-image"></div>

jQuery:

  $(window).scroll(function() {
if (isScrolledIntoView('#window_1')) {
    $('#container').removeClass('container-image');
    $('#container').removeClass('container-replace-two');
    $('#container').addClass('container-replace-one');        
        }
        else if (isScrolledIntoView('#window_2')) {
            $('#container').removeClass('container-image');
            $('#container').removeClass('container-replace-one');
            $('#container').addClass('container-replace-two');
        }
     });

answered Dec 1, 2014 at 1:56

baao

73.5k18 gold badges152 silver badges208 bronze badges

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

1 Comment

simone.tino Over a year ago

yes, it works now. But I am still not understanding why jQuery css() does not work properly with background property on IE and Firefox. Do you know why?

Collectives™ on Stack Overflow

jQuery change DIV background with css()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related