在移動設備上破碎的CSS背景大小

Question

我正在建立一個網站，其頭部元素具有固定的全屏幕背景圖像。它完全按照預期工作，除了在移動設備上。我的iphone/ipad上的Safari和Chrome都沒有正確顯示它 - 它似乎縮放到比標題元素大得多的尺寸。

下面是完整的網站：http://www.loganmerriam.com/

和有關CSS：

header { 
    background: url(../img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: 100% auto; 
    -moz-background-size: 100% auto; 
    -o-background-size: 100% auto; 
    background-size: 100% auto; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

即使當我使用媒體查詢來加載一個更小的背景下仍然只顯示圖像的一個微小的，縮放後的部分。

也可以任何人指導我一個很好的方式來檢查CSS的idevices？

Answer 1

不知道它是否會有很多幫助，但http://screenqueri.es/index.php可能會有幫助。

Answer 2

這是因爲你的風格正在被覆蓋。取下background-size: cover;

header { 
    background: url(../img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: 100% auto; 
    -moz-background-size: 100% auto; 
    -o-background-size: 100% auto; 
    background-size: 100% auto; 
    -webkit-background-size: cover; // remove this 
    -moz-background-size: cover; // remove this 
    -o-background-size: cover; // remove this 
    background-size: cover; // remove this 
}