css實現響應式全屏背景

利用css中 background-size：cover  填充整個viewport

注意：

       一張背景圖像素5000px*5000px在pc端 縮放都基本滿足要求 不會出現模糊失真；

       但是在移動端使用如此大的圖片完全是浪費資源，大圖會導致加載變慢，尤其是在移動網絡下。

在移動端可以另設一張相對小一點的圖片使用媒體查詢

body{
/* 加載背景圖 */
background-image: url(images/background-photo.jpg);

/* 背景圖垂直、水平均居中 */
background-position: center center;

/* 背景圖不平鋪 */
background-repeat: no-repeat;

/* 當內容高度大於圖片高度時，背景圖像的位置相對於viewport固定 */
background-attachment: fixed;

/* 讓背景圖基於容器大小伸縮 */
background-size: cover;

/* 設置背景顏色，背景圖加載過程中會顯示背景色 */
background-color: #464646;
}
    

@media only screen and (max-width: 767px) {
  body {
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
}