背景图像被切断答案

【问题标题】：Background Image is being cut off背景图像被切断
【发布时间】：2012-08-15 01:04:42
【问题描述】：

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

【问题讨论】：

你试过什么？ Firebug 和/或 Webkit Inspector 应该可以让您很好地了解导致问题的原因。
是的，我使用了 Firebug，但仍然不明白它有什么问题。谢谢

【解决方案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%
  ...
}

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

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

【讨论】：

好一个jcern。我想你明白了。然而，它不仅仅是关于内容包装器。如果您检查横幅和标题，它会显示相同的问题。你能为他们两个解释一下吗？如果我们调整到较小的窗口，也请联系浮动图标挂在错误的位置
另外，关于联系按钮，它在一个小窗口中被搞砸了，因为它有一个绝对位置（位置：绝对；右：0）。这将使它显示在其父容器的最右侧，而不管其中可能出现的任何其他内容。