自從我發(fā)布了大背景網(wǎng)頁設(shè)計(jì)合集之后，我收到了很多電子郵件詢問如何用css實(shí)現(xiàn)大背景的網(wǎng)頁設(shè)計(jì)。因此我決定和大家分享大背景網(wǎng)站的設(shè)計(jì)技巧。在此教程中，我會(huì)用一些實(shí)例來說明如何用一張或者兩張圖片實(shí)現(xiàn)大背景網(wǎng)站的設(shè)計(jì)。

經(jīng)常會(huì)犯的錯(cuò)誤：背景被裁減（查看示例）

查看示例文件，在小于1280分辨率時(shí)，是沒有問題的。但是如果你的顯示器的分辨率大于1280像素，你會(huì)看到背景圖片以外的部分。

實(shí)例1：一張圖片（查看示例）

簡單的解決問題的方法：將圖片邊緣的顏色設(shè)置成和網(wǎng)頁背景色相同的顏色。這里我用Web Designer Wall作例子，看下面的圖片，注意圖片的邊緣是純色的。

CSS部分

這部分很簡單，為body元素設(shè)置背景圖像（定位于center，top）

以下是css代碼：

body {   padding: 0;   margin: 0;   background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;   width: 100%;   display: table; }

注意觀察在body選擇符內(nèi)有兩條額外的線條，這樣是為了防止當(dāng)瀏覽器窗口比內(nèi)容寬度小時(shí)，背景圖片的改變。（這在firefox會(huì)出現(xiàn)）

實(shí)例2：兩張圖片（查看示例）

我將會(huì)用到Design Jobs on the Wall做例子，我給body標(biāo)簽應(yīng)用了重復(fù)的軟木板的圖案，然后給wrapper標(biāo)簽應(yīng)用了居中的背景圖案。

這里的訣竅在于給Gif圖像使用了和軟木背景相似的但卻更深的顏色。

實(shí)例3：天空背景（查看示例）

在這個(gè)例子中，我給body標(biāo)簽應(yīng)用了1個(gè)像素的水平方向重復(fù)的漸變。然后我給wrapper標(biāo)簽加上了一張居中的云朵背景圖片。

更新：給html選擇符應(yīng)用天空背景圖片（查看示例）

感謝讀者的評(píng)論，以下是給html選擇符應(yīng)用了漸變背景，因此wrapper標(biāo)簽就不再需要了，這是更為簡潔的一個(gè)方法。

原文鏈接：How to: CSS Large Background