Question

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

Answer 1

我认为您正在查看内容包装器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或更小）。但是，由于页面上还有其他元素指定宽度为1000px或更高，因此这些div内部的内容会超出该范围。

您可以通过将body的宽度设置为1000px（或者无论页面的最大宽度是什么）来扩展页面，在这种情况下，标题将扩展到该大小的100％。或者，您可以使用相对定位的方式围绕整个内容，然后100％指令将指示周围div的宽度的100％而不仅仅是窗口。

背景图像正在被切断

1 个答案: