bootstrap怎麼設定背景圖片

bootstrap怎麼設定背景圖片自動適應

瀏覽器：chrome

使用CSS： bootstrap（這個可能會影響到我們css的設置，所以還是提一下）

在設置背景圖片的過程中，經常遇到背景圖片不能按照自己所想的那樣來自動適應屏幕，我也是嘗試了很多種方法之後找到了適合我自身情況的設定方式。

程式碼如下：

body {
  background-image: url("../images/backgroundImg2.jpg");
  background-position: center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
}

這樣，就能成功的設定body的背景圖片自動適應螢幕。

但是，其他瀏覽器能不能相容我還沒去確認過，目前在chrome上面是可以用的。

相關屬性：

background-image 屬性為元素設定背景圖片。

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

預設地，背景圖像位於元素的左上角，並在水平和垂直方向上重複。

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

相關推薦：《bootstrap教程》

以上是bootstrap怎麼設定背景圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！