CSS background-image 屬性

定義和用法

background-image 屬性為元素設置背景圖像。

元素的背景占據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。

默認地，背景圖像位于元素的左上角，并在水平和垂直方向上重復。

提示：請設置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果。

詳細說明

background-image 屬性會在元素的背景中設置一個圖像。

根據 background-repeat 屬性的值，圖像可以無限平鋪、沿著某個軸（x 軸或 y 軸）平鋪，或者根本不平鋪。

初始背景圖像（原圖像）根據 background-position 屬性的值放置。

另請參閱：

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

HTML DOM 參考手冊：backgroundImage 屬性

實例

將圖像設置為頁面背景：

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

親自試一試

CSS 語法

background-image: url|none|initial|inherit;

屬性值

屬性值

值 描述
url('URL') 指向圖像的路徑。
none 默認值。不顯示背景圖像。
inherit 規定應該從父元素繼承 background-image 屬性的設置。

技術細節

默認值： none
繼承性： no
版本： CSS1
JavaScript 語法： object.style.backgroundImage="url(stars.gif)"

瀏覽器支持

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

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5