CSS background-size 屬性

定義和用法

background-size 屬性規定背景圖像的尺寸。

另請參閱：

CSS 教程：CSS 背景、CSS 背景（高級）

HTML DOM 參考手冊：backgroundSize 屬性

實例

規定背景圖像的尺寸：

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

親自試一試

CSS 語法

background-size: length|percentage|cover|contain;

屬性值

值 描述 測試
length

設置背景圖像的高度和寬度。

第一個值設置寬度，第二個值設置高度。

如果只設置一個值，則第二個值會被設置為 "auto"。

 測試
percentage

以父元素的百分比來設置背景圖像的寬度和高度。

第一個值設置寬度，第二個值設置高度。

如果只設置一個值，則第二個值會被設置為 "auto"。

 測試
cover

把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。

背景圖像的某些部分也許無法顯示在背景定位區域中。

 測試
contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。 測試

技術細節

默認值： auto
繼承性： no
版本： CSS3
JavaScript 語法： object.style.backgroundSize="60px 80px"

更多實例

拉伸背景圖像
拉伸背景圖像來完全覆蓋內容區域。
拉伸背景圖像，對背景圖像水平復制四次
對背景圖像進行拉伸，以使背景圖像恰好水平復制四次。

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-