{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Explosion°爆炸 的问题《CSS: background image does not fill when scrolling》','https://www.manongdao.com/q-92399.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
working on a very small site which loads in one go, so there is a div which holds all the background images, and on top of that (i.e. higher z-index) there is a content div which holds everything. I can switch backgrounds easily based on what content is selected.
Unfortunately, I noticed if you launch in a small window so that scrollbars appear, if you scroll there is no background image in the 'revealed' portions of the page. :-(
Page structure:
<body>
<div id="bg">
<div class="bgone"></div>
<div class="bgtwo"></div>
</div>
<div id="container">
<!-- content panels here -->
</div>
</body>
css:
#bg
{
margin: 0px;
position: absolute;
top: 0px;
left: 0px;
width:100%;
height: 1024px;
z-index:1;
}
.bgone
{
margin: 0px;
position: absolute;
width:100%;
height: 1024px;
background-image:url(../images/one.jpg);
background-position:top;
background-repeat:repeat-x;
z-index:2;
}
.bgtwo
{
margin: 0px;
position: absolute;
width:100%;
height: 1024px;
background-image:url(../images/two.jpg);
background-position:top;
background-repeat:repeat-x;
z-index:3;
}
#container
{
position:relative;
width:900px;
padding:0px;
margin:0px auto;
height:600px;
z-index:10;
}
Just a note, If you have height set on the parent/element, It might also break the image.
For example, most people use this in their code
I'd add to Steg's suggestion to "remove the 'width: 100%' from the backgrounds and replace it with a 'min-width: 900px'," by saying that you should not remove width: 100%, but simply add a min-width. Otherwise, if the width is larger than the min-width, some browsers may not repeat it beyond the min-width.
Using
background-repeat:repeat-xwill only give you one row of the background image repeated along the top. If you remove that CSS property altogether, it will tile the background image both horizontally and vertically, which it sounds like is what you want. Unless your background images are 1024px high, they won't fill the containing div.I had this issue and fixed with:
I had the same problem and it is annoying. Problem for me was that I could not change the HTML, only the CSS, so I couldn'y remove the additional divs.
The problem as I see it is that the backgrounds have "width: 100%" and the container has "width: 900px". So, for example, if the browser window is 800px wide, the backgrounds are set to 800px and, therefore, when you scroll the window horizontally, you get the areas without the background.
Another way to fix the problem is to remove the "width: 100%" from the backgrounds and replace it with a "min-width: 900px", thus forcing the backgrounds to be always at least the same width as the container. When the window size becomes less than 900px, the backgrounds always remain at the same with as the container. Works a treat.
In my case the solution was to set fixed height and/or width to the div in question.