如何舒展了頭跨Web頁面的背景與CSS

http://www.stumbleupon.com/如何舒展了頭跨Web頁面的背景與CSS

http://www.mixx.com/

這兩個網站都在頁面上拉伸背景頭，而內容爲中心，並覆蓋好比說80％寬度，而且與佈局的其餘部分完全一致。

我對這兩個網站特別感興趣，因爲標題有兩個背景顏色，而不僅僅是一個。

我確定網上有很多教程，但我沒有搜索關鍵字。

來源

2010-02-22 TPR

分析：

的「頭」實際上包含的的div：wrapperHeader和wrapperNav。這兩個有不同的背景顏色。這些div都是獨生子女每個帶有CSS屬性

margin: 0 auto

這導致在水平居中。

此屬性也被分配給內容div，因此標題，導航和內容始終居中。當然這需要爲這些元素設置一些寬度。

的結構是這樣的：

<div id="wrapperHeader"> 
    <div class="" id="header"> 
      <!-- mnore stuff here, like logo --> 
    </div> <!-- end header --> 
</div> 
<div id="wrapperNav"> 
    <ul id="navMain"> 
     <li class="discover first"><a href="/discover/toprated/">Discover</a></li> 
     <li class="favorites"><a href="/favorites/">Favorites</a></li> 
     <li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li> 
    </ul> <!-- end navMain --> 
</div> 
<div id="wrapperContent"> 
    <div class="clearfix" id="content"> 
    </div> <!-- end content --> 
</div>

如果你Firebug爲Firefox，你可以很容易地分析自己的元素。

來源

2010-02-22 09:17:17

這是一個很好的答案。但是，這裏有一個可能會吸引一些人的問題 - 這肯定會讓我感動！我的一位同事正在進行一些調試，並需要確定在我們的Web應用程序的各個部分中使用了哪種佈局。解決這個問題的簡單方法是在DOCTYPE聲明之前在模板文件的頂部放置註釋。您猜對了：該網站在Firefox中完美呈現，IE中唯一明顯的區別是頂部橫條並不完全貫穿整個頁面。修正是爲了確保DOCTYPE之前沒有任何東西。 – JamesG 2011-11-09 05:35:38

是background-image設置爲body財產background-repeat：

background-repeat: repeat-x;

編輯：至於你的中心內容 - 我做這種方式：

<body> 
<div id="wrapper"> 
    <!-- here is wrapper *everything* else --> 
</div> 
</body>

，然後將包裝的width設置爲值（主要爲960px）。然後，當您將其餘量設置爲0 auto時，它將自行定位。

#wrapper{ 
    margin: 0 auto; 
}

來源

2010-02-22 09:12:40

您可以使用背景圖像1px寬度並設置水平背景重複。

background-image:url('paper.gif'); 
background-repeat:repeat-x;

然後調整你的內容，你喜歡哪種方式。

來源

2010-02-22 09:13:28 anthares

這只是一個固定寬度的佈局，但具有自動的左右邊距。如果頁面大小比內容寬度更寬，則會影響整個內容塊。

僅將背景設置爲重複圖像（repeat-x），使其看起來像菜單元素實際上延伸了頁面的整個寬度。

來源

2010-02-22 09:14:25 ZombieSheep

我想你說的是100％/ 80％的寬度差....

這應該幫助您開始：

<div id="header" style="width:100%; margin: 0px;"> 
    <!-- header content --> 
</div> 
<div id="content" style="display: block; width: 80%; margin: 0px auto"> 
    <!-- content --> 
</div>

保證金：在內容自動使以塊爲中心。

立克亞當說，添加背景重複給它的圖形賞心悅目的元素。

來源

2010-02-22 09:14:40

添加背景圖片有2個缺點：

你想改變你的頭，你必須打開你的Photoshop和改色那裏，然後在你的CSS再次改變它的顏色每次。
現在，您希望標題的背景顏色在整個頁面上展開，但是如果您希望使用頁腳來完成該操作，該怎麼辦？

最簡單的方法是這樣的一個：

（你不僅創建一個簡單的方法來伸展整個頁面的顏色，能夠在所有頭內容和頁腳使用不同的顏色，也它從IE瀏覽器（當您使用相同的元素寬度和利潤）的雙緣問題可以節省自己

的index.html：

<html> 
    <body id="body"> 
    <div id="header"> 
     <div class="container"> 
      <!-- header's content here --> 
     </div><!-- .container --> 
    </div><!-- #header --> 
    <div id="content"> 
     <div class="container"> 
      <!-- main content here --> 
    <div id="footer"> 
     <div class="container"> 
      <!-- footer's content here --> 
     </div><!-- .container --> 
    </div><!-- #footer --> 
    </body> 
    </html>

分

的style.css：

.container { 
    margin: 0 auto; 
    overflow: hidden; 
    padding: 0 15px; 
    width: 960px; 
} 

#header { 
    background: #EEE; 
} 

#content { 
    background-color: #F9F9F9; 
} 

#footer { 
    background-color: #333; 
    color: #BBB; 
    clear: both; 
}

在這個例子中，div.container中心的元素，也讓他們有一個寬度和背景顏色可以跨頁伸展，因爲＃header, #content和#footer沒有寬度。並且在將來只需在.container內部應用邊距和填充，就可以在將來節省很多與IE相關的問題。

來源

2010-02-22 09:30:26 alexchenco

偉大的答案 - 非常簡單，簡潔等... +1 – nicorellius 2014-04-18 20:22:10

對於CSS 2，無法拉伸背景圖像。沒有設置背景圖像尺寸的屬性。您可以在X，Y或兩個軸上重複。

CSS 3將允許伸展。

來源

2010-02-22 10:15:05 Franck

我不同意，有一個簡單的方法來做到這一點。兼容谷歌瀏覽器和Firefox，IE未經測試。

在你的CSS文件：

body{ 
    overflow-x:hidden; 
} 

div#headerbg{ 
    width:110%; 
    margin-left:-20px; 
    background-color:black; 
}

，現在只是用它在你的HTML文件。你可以添加定位和什麼不是這個。

來源

2012-05-17 14:26:57 RichBoy3975

+1，只是想指出，如果您的任何內容將比視口更寬，則缺少水平滾動可能會成爲問題。 – ametren 2012-06-26 15:03:11

很簡單，沒有一大堆喧鬧。

將它粘貼在body和div容器之間 - 你可以在其中有任何你想要的東西，但是在我的頁面上它是這樣的：（我試圖讓它包裝，不去，只是複製和粘貼）

<body> 

<div id="bv_ImageMap1" style="margin:0;padding:0;position:absolute;left:0px; top:187px;width:100%;height:5px;text-align:left;z-index:0;"> <img src="files/IMG_2.jpg" id="ImageMap1" alt="" usemap="#ImageMapImageMap0" border="0" style="width:100%; height:5px;"> 

<map name="ImageMapImageMap0"> 
</map> 
</div> 

<div container>

然後改變你需要頂部的信息：PX高度： _px IMG SRC =「yourfile/yourimg.jpg和重要的別忘了未來高度：_ _px

任何地方都不需要任何東西。試試吧。

來源

2014-01-30 02:26:06 amy

如何舒展了頭跨Web頁面的背景與CSS

回答

相關問題