CSS размер фона сломан на мобильном телефоне

Question

Я создаю сайт с элементом заголовка, который имеет фиксированное полноэкранное фоновое изображение. Он работает точно так, как предполагалось, за исключением мобильных устройств. Оба Safari и Chrome на моем iphone/ipad не отображают его правильно - он, похоже, масштабируется до размеров, намного больших, чем элемент заголовка.

Вот полный сайт: 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 на идеологиях?

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 
}