1. 程式人生 > >設定背景圖片自動適應螢幕

設定背景圖片自動適應螢幕

先說一下我的配置:

瀏覽器: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上面是可以用的。