css - 背景图像被切断

Question

有谁知道由于窗口尺寸较小而如何切断背景图像。请看一下这个网站。http://nfldata.com。尝试使窗口宽度小于 900 像素。然后滚动到右侧。您会发现背景图像不存在。但是对于页脚，它出现了。导致此问题的 CSS 代码是什么？

Answer 1

我认为您正在查看 content-wrapper div 的背景，如下所示。由于该元素的宽度设置为 100%，并且中心块 div 的固定宽度为 1000px，如果您将窗口折叠到小于 1000px 的宽度，则内容包装器将不会显示并且背景将有效消失。

HTML 元素...

<div id="content-wrapper">
   <div class="center-block">
     ....
   </div>
</div>

相关CSS：

#content-wrapper {
  margin: 0 auto;
  width: 100%;
  background-image: url(/images/content-background.png);
  background-position: center top;
  background-repeat: repeat-y;
}

#content-wrapper .center-block {
  width: 1000px;
}

关于标题，您会看到它有一个声明

#header {
  width : 100%
  ...
}

这会将元素的宽度设置为父容器的宽度 - 在这种情况下，它是活动窗口（在您的情况下为 900px 或更小）。但是，由于页面上还有其他元素指定了 1000 像素或更大的宽度，因此这些 div 内的内容会超出此范围。

您可以通过将正文的宽度设置为 1000 像素（或任何页面的最大宽度）来扩展页面，在这种情况下，标题将扩展为该大小的 100%。或者，您可以用相对定位的 包围整个内容，然后 100% 指令将指示周围 div 的 100% 宽度，而不仅仅是窗口。