如何使在整個網站這樣的背景下拉伸

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>