Html 如何使这个背景延伸到整个网站

大家好，我有这个网站：

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

---

注：这仅适用于分辨率大于1280px的情况，因此，如果需要查看发生了什么，请缩小屏幕

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

将以下属性添加到：页眉、contentbackground和页脚：

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

这将确保元素居中

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

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

但是，现在我们再也看不到页眉的水平延伸，所以我们需要将#页眉移到#包装器上方

...
...

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

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

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; }

#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>

写得很快，希望你能看到这个想法？我不明白为什么你会选择绝对位置还是相对位置。使用边距：0自动；改为将div居中：）

不要使用表，只使用div

不需要包含两次FlowPlayer脚本

我看不出您使用JQuery（不需要包括它）

用合适的CSS替换Dreamweaver的滚动图像：

.item{background:image.jpg} .item:hover{background:image_rollover.jpg}

获取精灵图像（您可以在此处阅读：）

作为最初的问题。。。每个“行”必须使用两个div，如下所示：

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

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; }

#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>

#标题#包装器{
浮动：左；
宽度：100%；
背景：header_background.jpg；
}
#菜单包装{
浮动：左；
宽度：100%；
背景：menu_background.jpg；
}
#内容包装器{
浮动：左；
宽度：100%；
背景：content_background.jpg重复中心顶部；
}
.包装纸{
保证金：0自动；
宽度：1260px；
}
---标题内容---
---菜单内容---
---页面内容---

说得清楚一点，黑色横幅就是你想要的（并且已经实现了），你想让“桃子”和底部黑色横幅也这样做吗？那准确吗？我不太明白你到底想做什么。顶部的部分大小固定，也没有拉伸。我正在试用，到目前为止还可以，但有一些小问题。不过要小心，我不知道这些页面的布局是否有很大差异，当你更换包装时，可能会把它们弄乱。您在HTML中所做的任何更改都可能会在每个不同的页面上进行。是的，我知道，老实说，现在的布局给我带来了一些问题。div#footer div会做什么？我的意思是，它像一个内部div吗？@Ryan，它像header和mainContent div。它们起着容器的作用。因此，您有3个主div包含整个页面。在我的示例中，footer div有you's bottom表单，带有logo和all。我可以建议您尝试一下，然后一步一步地查看发生了什么：）因此，请删除包装器类，使用3个包装器（页眉、内容、页脚）并使用div和class，每个包装器都应该解决问题？这听起来比我所做的更简单，但是仍然需要将所有“包装”类的左边距和右边距设置为“自动”。@Timothy Groote这就是我的atm，PS：我只做了联系人页面，因为它没有文本，仍然没有设法将其居中。好的，到目前为止还不错，但是：左边距：自动和右边距：如果对象未设置宽度，则不会将其居中。确保以下div的宽度为1280px:#页眉和#页脚。我不知道中间部分是怎么回事，但是尽量避免在每个部分中添加两个具有相同类名的divother@Timothy但是我们不是在.header而不是在#header中设置宽度吗？