CSS：滚动时背景图像不填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2083831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: background image does not fill when scrolling
提问by rekindleMyLoveOf
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.
在一个一次性加载的非常小的站点上工作，因此有一个 div 保存所有背景图像，在此之上（即更高的 z-index）有一个内容 div 保存所有内容。我可以根据选择的内容轻松切换背景。
Unfortunately, I noticed if you launch in a small window so that scrollbars appear, if you scroll there is no background imagein 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:
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;
}
回答by Steg
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.
我有同样的问题，这很烦人。对我来说问题是我无法更改 HTML，只能更改 CSS，所以我无法删除额外的 div。
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.
我看到的问题是背景具有“宽度：100％”而容器具有“宽度：900px”。因此，例如，如果浏览器窗口的宽度为 800 像素，则背景设置为 800 像素，因此，当您水平滚动窗口时，您将获得没有背景的区域。
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.
解决此问题的另一种方法是从背景中删除“width: 100%”并用“min-width: 900px”替换它，从而强制背景始终至少与容器的宽度相同。当窗口大小小于 900px 时，背景始终与容器保持一致。很好用。
回答by ali bagheri
I had the same problem. this fixed by overflow-x: scroll;
我有同样的问题。这由溢出-x 修复：滚动；
top:0px; bottom: 0px;
height: 100%;
background-repeat: repeat;
position: absolute;
overflow-x: scroll;
回答by rekindleMyLoveOf
The answer is here:
答案在这里：
In short, I was making things overly complicated. Solution was to:
简而言之，我让事情变得过于复杂。解决方案是：
- get rid of the divs that hold bg images - you'd have to set dimensions to 100% just to see the bg img, but that would only be 100% of the viewable area / viewport, which isn't recalculated when you scroll.
- apply any bg images directly to the body elementbecause its dimensions aren't restricted to the initial size of the viewport
- 摆脱保存 bg 图像的 div - 您必须将尺寸设置为 100% 才能看到 bg img，但这只会是可视区域/视口的 100%，滚动时不会重新计算。
- 将任何 bg 图像直接应用于 body 元素，因为它的尺寸不受视口的初始大小的限制
and in my case (using multiple bg images):
就我而言（使用多个 bg 图像）：
create separate css styles for each bg image, then
use jquery to apply them to the body - eg $(body).addClass("specialbg"); etc
为每个 bg 图像创建单独的 css 样式，然后
使用 jquery 将它们应用到 body - 例如 $(body).addClass("specialbg"); 等等
回答by neil1967
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.
我会在 Steg 的建议中添加“从背景中删除 'width: 100%' 并将其替换为 'min-width: 900px'”，说你不应该删除 width: 100%，而只需添加一个最小宽度。否则，如果宽度大于 min-width，某些浏览器可能不会在 min-width 之外重复它。
回答by Helzgate
I had this issue and fixed with:
我遇到了这个问题并修复了：
html {
background-image: url('http://www.standardbrand.com/media/1237/home.jpg');
}
body{
color: white;
background: transparent;
}<!DOCTYPE html>
<html>
<body>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</body>
</html>回答by carillonator
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.
使用background-repeat:repeat-x只会给你一行沿着顶部重复的背景图像。如果您完全删除该 CSS 属性，它将水平和垂直平铺背景图像，这听起来像是您想要的。除非您的背景图片高 1024 像素，否则它们不会填充包含的 div。
回答by amypellegrini
In my case the solution was to set fixed height and/or width to the div in question.
在我的情况下，解决方案是为有问题的 div 设置固定的高度和/或宽度。
回答by Sibiraj
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
例如，大多数人在他们的代码中使用这个
body {
height: 100%; //avoid it
}
