Jquery - making background image rotate with 100% height

StackOverflow https://stackoverflow.com/questions/22509932

سؤال

I have a 4 image background slider going using Jquery. All the images rotate fine, there is not any problem there. However, I want the images to always stay at the fixed height and width of the screen. At the moment if you scroll down a lot the background image doesn't stay fixed and you just see a blank background. I would like that the image is always 100% in width and height of the users screen even if they are scrolling down. Can someone point out the CSS error I am making.

HTML

<body>

  <div id="content-background">
    <div id="img1"></div>
    <div id="img2"></div>
    <div id="img3"></div>
    <div id="img4"></div>
  </div>

  <div class="full-body">
      <!-- ALL MY PAGE CONTENT IS STORED IN HERE-->
  </div>

</body>

CSS

#content-background{
width: 100%;
height: 100%;
position: relative;
}

#img1{
width: 100%;
height: 100%;
position: absolute;
display: block;
background-image: url(../images/sso-content-background-shopping.jpg);
background-size: cover;
}

#img2{
width: 100%;
height: 100%;
position: absolute;
display: block;
background-image: url(../images/sso-content-background-movie.jpg);
background-size: cover;
}

#img3{
width: 100%;
height: 100%;
position: absolute;
display: block;
background-image: url(../images/sso-content-background-gas.jpg);
background-size: cover;
}

#img4{
width: 100%;
height: 100%;
position: absolute;
display: block;
background-image: url(../images/sso-content-background-grocery.jpg);
background-size: cover;
}

.full-body{
display: block;
position: absolute;
z-index: 1001;
width: 100%;
top: 0;
left: 0;
}

My Jquery Code, but I don't think this is an Issue since it works fine

$(function(){
function rotate(){
    $('#content-background div').last().fadeOut(1000, function(){
        $(this).insertBefore($('#content-background div').first()).show();
});
}
setInterval(function(){
    rotate();
},5000);
});
هل كانت مفيدة؟

المحلول

Have you tried position:fixed?

#content-background
   {
   display: block;
   position: fixed;  
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   }

possibly need to add another container

<div id="content-background">
  <div id="relative-container">
    <div id="img1"></div>
    <div id="img2"></div>
    <div id="img3"></div>
    <div id="img4"></div>
  </div>
</div>

#relative-container
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top