自從我發(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代碼：

以下為引用的內(nèi)容：

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