CSS網頁設計實例:設計制作大背景網頁

http://www.inspirr.com

---

自從我發布了大背景網頁設計合集之后，我收到了很多電子郵件詢問如何用css實現大背景的網頁設計。因此我決定和大家分享大背景網站的設計技巧。在此教程中，我會用一些實例來說明如何用一張或者兩張圖片實現大背景網站的設計。
經常會犯的錯誤：背景被裁減（查看示例）
查看示例文件，在小于1280分辨率時，是沒有問題的。但是如果你的顯示器的分辨率大于1280像素，你會看到背景圖片以外的部分。
實例1：一張圖片（查看示例）
簡單的解決問題的方法：將圖片邊緣的顏色設置成和網頁背景色相同的顏色。這里我用Web Designer Wall作例子，看下面的圖片，注意圖片的邊緣是純色的。
CSS部分
這部分很簡單，為body元素設置背景圖像（定位于center，top）
以下是css代碼：
body {
padding: 0;
margin: 0;
background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;
width: 100%;
display: table;
}
注意觀察在body選擇符內有兩條額外的線條，這樣是為了防止當瀏覽器窗口比內容寬度小時，背景圖片的改變。（這在firefox會出現）


  Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |