如何使在整个网站这样的背景下拉伸

Question

嗨，大家好我有这个网站：

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

基本上到目前为止，我设法使上部STRECH作为背景，现在我需要做的其他部分也一样。我不知道该怎么做，所以我要求提供一些想法，如何做到最好，保持相对位置和背景图像根据所需内容区域进行调整。

PS。这只在分辨率高于1280像素时才需要，因此如果需要查看发生了什么，请将其缩小。

Answer 1

不能伸展这些元素，因为它们包含在名为'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); 
} 

然而，现在我们将看不到头的横向拉伸了，所以我们需要将#header移至#wrapper上方。

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

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

Answer 2

您需要的结构改变是这样的：

<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 auto;以中心divs代替:)

Answer 3

1. 不要使用表格，只能使用DIV。
2. 不需要包含两次FlowPlayer脚本。
3. 我没看到你使用JQuery（不需要包括那个）。

.item {背景：image.jpg的} .item：悬停

适当CSS替换Dreamweaver中的过渡图像{背景：image_rollover.jpg}

1. 获取精灵图片（可以在这里阅读：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>