html - 如何让这个背景贯穿整个网站

Question

大家好，我有这个网站:

http://www.ryansammut.com/orijen/

基本上到目前为止，我设法将顶部的部分作为背景，现在我还需要制作其他部分。我不确定该怎么做，所以我想知道如何最好地做到这一点，保持所有位置相对，背景图像将根据所需的内容区域进行调整。

附言。这仅适用于大于 1280 像素的分辨率，因此如果您需要查看发生了什么，请缩小。

Answer 1

您不能拉伸(stretch)这些元素，因为它们包含在名为“wrapper”的 div 中，该 div 的最大宽度为 1280 像素。

将以下属性添加到:header、contentbackground 和 footer:

margin-left:auto; 
margin-right:auto;

这将确保元素居中。

然后从#wrapper 中删除宽度属性，并为其添加背景，如下所示:

#wrapper {
  position: relative;
  margin: 0 auto;
  top: 0px;
  padding: 0px;
  background-image: url(../images/contentBG.png);
}

但是，现在我们不会再看到标题的水平拉伸(stretch)，所以我们需要将#header 移到#wrapper 之上。

<div id="header">
 ...
</div>

<div id="wrapper">
 ...
</div>