Question

在一个非常小的网站上工作，一次加载，所以有一个div保存所有背景图像，除此之外（即更高的z-index ）有一个内容拥有一切的div。我可以根据选择的内容轻松切换背景。

不幸的是，我注意到如果您在一个小窗口中启动以便滚动条显示，如果滚动则在页面的“显示”部分中没有背景图像。： - （

页面结构：

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

Answer 1

我遇到了同样的问题而且很烦人。对我来说问题是我无法更改HTML，只能更改CSS，因此我无法删除其他div。

我看到的问题是背景有“宽度：100％”，容器有“宽度：900px”。因此，例如，如果浏览器窗口宽度为800px，则背景设置为800px，因此，当您水平滚动窗口时，您将获得没有背景的区域。

解决问题的另一种方法是从背景中删除“width：100％”并将其替换为“min-width：900px”，从而强制背景始终至少与容器的宽度相同。当窗口大小小于900px时，背景始终与容器保持一致。是一种享受。

Answer 2

我遇到了同样的问题。这由overflow-x：scroll;

修复

    top:0px; bottom: 0px;
    height: 100%;
    background-repeat: repeat;
    position: absolute;
    overflow-x: scroll;

Answer 3

答案在这里：

http://bytes.com/topic/html-css/answers/577902-background-image-getting-cut-off-outside-original-window-display

简而言之，我让事情过于复杂。解决方案是：

摆脱持有bg的div 图像 - 你必须设置尺寸为100％只是为了看到 bg img，但那只会是100％可视区域/视口，这不是你重新计算的滚动。
直接应用任何bg图片身体元素因为它尺寸不限于视口的初始大小

在我的情况下（使用多个bg图像）：

为其创建单独的css样式每个bg图像，然后
使用jquery将它们应用于身体 - 例如 $（体）.addClass（ “specialbg”）;等

Answer 4

我要添加Steg的建议“从背景中移除'宽度：100％'并用'min-width：900px'替换它”，说你不应该删除宽度：100％，但是只需添加最小宽度。否则，如果宽度大于最小宽度，则某些浏览器可能不会重复超出最小宽度。

Answer 5

我遇到了这个问题并修复了：

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>

Answer 6

使用background-repeat:repeat-x只会在顶部重复显示一行背景图像。如果你完全删除那个CSS属性，它会水平和垂直地平铺背景图像，听起来就像你想要的那样。除非您的背景图像高1024像素，否则它们不会填充包含的div。

Answer 7

在我的情况下，解决方案是将固定高度和/或宽度设置为相关div。

Answer 8

只需注意，如果您在父/元素上设置了高度，它也可能会破坏图像。

例如，大多数人在他们的代码中使用它

body {
   height: 100%; //avoid it
}

Answer 9

使用 background-attachment: fixed;不会随页面滚动的背景图像。因此只滚动内容。

       body {

        background-image: url("image.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
      }

CSS：滚动时背景图像不会填充

9 个答案: