在網頁設計中，使用圖檔來填充元素背景，可以讓元素背景呈現豐富多彩的外觀。使用圖檔填充元素背景的常用樣式标簽有background-image、background-repeat、background-position和background-size，下面分别予以介紹。
background-image
background-image用于設定元素的背景填充圖檔，background-image的屬性值是url函數，url函數要求傳入圖檔的存儲路徑，存儲路徑可以是絕對路徑，也可以是相對路徑。下面的HTML文檔展示了background-image的使用方法。
在上面的網頁代碼中，定義了樣式happiy，happiy樣式使用happiy.png作為元素的背景圖檔，樣式的寬度和高度是500像素和450像素，使用該樣式的HTML元素寬度和高度值也将被設定為500像素和450像素，并使用happiy.png作為背景圖檔。下圖是浏覽器顯示效果。從顯示效果可以看出，由于happiy.png圖檔自身尺寸小于元素的尺寸，happiy.png圖檔通過重複填充，平鋪整個元素背景。
background-repeat
在預設情況下圖檔會從橫向和縱向兩個方向上對元素背景進行平鋪。可以通過樣式标簽background-repeat修改預設的圖檔平鋪模式，修改上面網頁代碼的happiy樣式，添加background-repeat樣式标簽，使用橫向平鋪模式。
下圖是浏覽器顯示效果。從浏覽器顯示效果可以看出，将background-repeat樣式屬性值設定為repeat-x(橫向平鋪)時，圖檔僅從橫向方向平鋪元素背景。
修改上面網頁代碼的happiy樣式，将background-repeat樣式屬性值修改為repeat-y，使用縱向平鋪模式。
下圖是浏覽器顯示效果。從浏覽器顯示效果可以看出，将background-repeat樣式屬性值設定為repeat-y(橫向平鋪)，圖檔僅從縱向方向平鋪元素背景。
修改上面網頁代碼的happiy樣式，将background-repeat樣式屬性值修改為no-repeat，不使用平鋪模式。
下圖是浏覽器顯示效果。從浏覽器顯示效果可以看出，将background-repeat樣式屬性值設定為no-repeat(不使用平鋪模式)，圖檔在橫向和縱向兩個方向上都不進行平鋪。
background-position
background-position用于設定元素背景圖檔的起始位置，background-position的屬性值可以使用關鍵字、百分比和數值。
關鍵字值有left、top、center、bottom，關鍵字值可以兩兩組合，第一個值是水準位置，第二個值是縱向位置。如果僅設定水準關鍵字，縱向位置會預設為center。修改上面網頁代碼的happiy樣式。
在上面的happiy樣式中，background-position屬性值設定了一個關鍵字(水準方向為top)，縱向關鍵字預設為center。浏覽器顯示效果如下圖所示。從浏覽器顯示效果可以看出，background-position屬性值設定為top時，圖檔從元素的頂部和中間開始填充元素背景。
修改上面網頁代碼的happiy樣式。
浏覽器顯示效果如下圖所示。從浏覽器顯示效果可以看出，background-position屬性值設定為right center時，圖檔從元素的右側和中間開始填充元素背景。
background-position的屬性值設定為百分比時，需要設定兩個值(x% y%)，第一個x%是水準位置，第二個y%是縱向位置。從元素的左上角開始，左上角是0％ 0％。右下角是100％ 100％，如果僅指定了一個值，第二個值将是50％。百分比的最終取值是按照元素的寬度和高度來計算的。
修改上面網頁代碼的happiy樣式。
浏覽器顯示效果如下圖所示。從浏覽器顯示效果可以看出，background-position屬性值設定為50% 50%時，圖檔從元素的中間開始填充元素背景。
background-position的屬性值設定為數值時，需要設定兩個數值(xpos ypos)，機關可以是像素，也可以是CSS其它機關。第一個值是水準位置，第二個值是縱向位置。從元素的左上角開始，左上角是0 0。如果僅指定了一個值，第二個值将是元素高度的50%。
修改上面網頁代碼的happiy樣式。
浏覽器顯示效果如下圖所示。從浏覽器顯示效果可以看出，background-position屬性值設定為50px 100px時，圖檔從元素左上角起始水準50像素、縱向100像素處，開始填充元素背景。
background-size
background-size用于設定填充圖檔的大小，屬性值為關鍵字、百分比和數值。
關鍵字有contain和cover，當background-size取值為contain時，如果圖檔尺寸大于元素尺寸，則縮小圖檔尺寸以适應元素的尺寸，圖檔按比例縮放；當background-size取值為cover時，則放大圖檔來适應元素的尺寸，圖檔按比例放大。修改上面網頁代碼的happiy樣式。
浏覽器顯示效果如下圖所示。從浏覽器顯示效果可以看出，background-size屬性值設定為cover時，圖檔按比例放大以适應元素的尺寸。
background-size的值還可以使用百分比和數值來設定元素背景圖檔的寬度和高度。百分比是按照元素的寬度和高度來計算的，數值直接指定了元素背景圖檔的寬度和高度，機關是像素或其它CSS機關。百分比和數值都是有兩個值組成，第一個值是圖檔寬度，第二個值是圖檔高度，如果僅指定寬度，高度預設為自動取值。修改上面網頁代碼的happiy樣式。
在上面的網頁代碼中，background-size的屬性值設定為30px，則元素背景圖檔寬度為30px，圖檔高度自動适應，圖檔高度自動适應的好處是圖檔會按比例縮放，不會讓圖檔變形。浏覽器顯示效果如下圖所示。
舉報/回報