Question

嗨大家我有这个网站：

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

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

PS。这仅适用于大于1280像素的分辨率，因此如果您需要查看正在发生的事情，请缩小。

Answer 1

您无法拉伸这些元素，因为它们包含在名为“wrapper”的div中，该div的最大宽度为1280px。

将以下属性添加到：header，contentbackground和footer：

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

这将确保元素居中。

然后从#wrapper中删除width属性，并为其添加背景，使其如下所示：

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

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

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

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

Answer 2

不要使用表格，只能使用DIV。
无需两次包含FlowPlayer脚本。
我没有看到你使用JQuery（不需要包含它）。
使用适当的CSS替换Dreamweaver的翻转图像：

.item {background：image.jpg} .item：悬停{background：image_rollover.jpg}

获取精灵图片（您可以在这里阅读：http://css-tricks.com/css-sprites/）

作为原始问题......你必须为每个“行”使用两个DIV，如下所示：

#header_wrapper {
  float: left;
  width: 100%;
  background: header_backgroud.jpg;
}
#menu_wrapper {
  float: left;
  width: 100%;
  background: menu_backgroud.jpg;
}
#content_wrapper {
  float: left;
  width: 100%;
  background: content_backgroud.jpg repeat center top;
}
.wrapper {
  margin: 0 auto;
  width: 1260px;
}

<div id="header_wrapper">
  <div class="wrapper">
    --- header content ---
  </div>
</div>
<div id="menu_wrapper">
  <div class="wrapper">
    --- menu content ---
  </div>
</div>
<div id="content_wrapper">
  <div class="wrapper">
    --- page content ---
  </div>
</div>

Answer 3

您需要将结构更改为以下内容：

<div id="header">
   <div>
     <ul>Nav</ul>
   </div>
</div>
<div id="mainContent">
   <div>Content</div>
</div>
<div id="footer">
   <div>Content</div>
</div>

然后CSS看起来像这样：

div#header { width: 100%; background: black; }
  div#header div { width: 600px; margin: 0 auto; background: url(...); }
div#mainContent { width: 100%; background: url(...); }
  div#mainContent div { width: 600px; margin: 0 auto; }
div#footer { width: 100%; background: black; }
  div#footer div { width: 600px; margin: 0 auto; }

写得很快，希望你能看到这个想法吗？我不明白为什么你会选择绝对或相对的位置。使用保证金：0自动;改为居中div：）

如何使整个网站的背景延伸

3 个答案: