在較小寬度的屏幕上重新定位背景圖像

Question

我不是一個經驗豐富的網頁開發人員，我正在快速地開發一些有趣的東西。我有一個1024 x 768的背景圖片（我知道這可能是個壞主意），如果瀏覽器寬度增加，我可以正確居中。但是，當瀏覽器寬度減少到768px以下時，我希望圖像與寬度一起「居中」，而不是僅添加左上角，以使圖像的中心始終與頁面上的其他元素保持一致。

什麼樣的CSS魔法可以解決這個問題？

這裏是我的CSS：

body 
    { 
    background: #000000; /*Black bg for extra space not covered by img*/ 
    font-family: sans-serif; 
    margin: 0px; 

} 

.wrap 
{ 
    background: url(../images/background.jpg) no-repeat; 
    background-attachment:fixed; 
     -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin: auto; 
    /*Stretch body all the way to edges*/ 
    /*width: 1024px; /*Min width for site*/ 

} 

感謝。

Answer 1

爲響應後續教程：

http://stephen.io/mediaqueries/

Answer 2

看看this website 在這裏顯示的CSS 「真棒，很簡單，進CSS3路」 幾乎是你的代碼有。你需要改變什麼居中圖像的水平和垂直是增加「中心爲中心」的背景設置：

.wrap{ 
    background: url(../images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin: auto; 
} 

Answer 3

你試過：

background-size: 100% 100%; 

連同所有其他的CSS。這將確保您使用的背景圖像將適合屏幕尺寸（高度和寬度）