如何在所有頁面寬度上保持背景圖像高度相同？

Question

背景圖像寬度爲1579px，因此，如果我們將瀏覽器拉伸至1920px，則背景圖像高度會發生變化，即使我給出了固定的div寬度（650px）。 那麼我怎樣才能保持所有頁面寬度相同的背景高度？

CSS：

.blue_bg1{  
    background: url("../images/hero-bg-espresso.jpg") no-repeat; 
    height: 650px; 
    background-position: center center; 
    background-size: 100% auto; 
    width: 100%; 
} 

Answer 1

使用cover財產。像這樣：

.blue_bg1 { 
background-size: cover; 
} 

Answer 2

使用px單位在background-size聲明：

.blue_bg1{  
    background: url("../images/hero-bg-espresso.jpg") no-repeat; 
    height: 650px; 
    background-position: center center; 
    background-size: 1579px auto; 
    width: 100%; 
} 

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 3

什麼嘗試添加背景聲明某些屬性？如果它可以幫助你 試試這個，還給我：

background: #0000FF url("../images/hero-bg-espresso.jpg") no-repeat fixed center; 

這是一個速記屬性設置在一個聲明中LL背景屬性。

參見：

http://www.w3schools.com/cssref/css3_pr_background.asp

希望它能幫助。