css - 背景图像被切断

Question

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

Answer 1

我认为您正在查看 content-wrapper div 上的背景，如下所示。由于该元素的宽度设置为 100%，并且中心 block 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 ，您会看到它有一个声明

#header {
  width : 100%
  ...
}

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

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