[教學]如何用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會出現)

實例2:兩張圖片(查看範例

我將會用到Design Jobs on the Wall做例子,我給body標籤應用了重複的軟木板的圖案,然後給wrapper標籤應用了居中的背景圖案。

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

實例3:天空背景(查看範例

在這個例子中,我給body標籤應用了1個圖元的水準方向重複的漸變。然後我給wrapper標籤加上了一張居中的雲朵背景圖片。

 

更新:給html選擇符應用天空背景圖片(查看範例

感謝讀者的評論,以下是給html選擇符應用了漸變背景,因此wrapper標籤就不再需要了,這是更為簡潔的一個方法。

DMC Firewall is developed by Dean Marshall Consultancy Ltd