自己比較頭疼的問題，網上搜了好多資料，大概整理了一下
1. 直接設置CSS樣式達到目的
.bg{
background-image: url(../images/1.jpg);//此爲圖片地址
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}
在以上代碼中，background-size: cover；是對背景圖進行等比例拉伸，仍然存在圖片顯示不完全的問題。
background-size: 100% 100%；是對背景圖的寬拉伸至屏幕寬度，高拉伸爲屏幕高度，即非等比例拉伸。
該方法雖然較爲簡單，但存在問題：對圖片進行拉伸成都較大時會使圖片失真。
2. 利用 css @media
@media only screen and (min-width: 1024px){ //當分辨率width >= 1024px 時使用1.jpg作爲背景圖片
.bg{
background:url(../images/1.jpg) no-repeat;
}
}
@media only screen and (min-width: 400px) and (max-width: 1024px){ //當分辨率400px < width < 1024px 時使用2.jpg作爲背景圖片
.bg{
background:url(../images/2.jpg) no-repeat;
}
}
@media only screen and (mmax-width: 400px) { //當分辨率width =< 400px 時使用3.jpg作爲背景圖片
.bg{
background:url(../images/3.jpg) no-repeat;
}
}
通過獲取當前屏幕的分辨率，選擇不同分辨率對應的樣式。
可以簡單理解爲：提前做好幾張不同尺寸的背景圖片，在一定分辨率範圍內使用某一尺寸的圖片。