Изображение заголовка закрывается, когда мобильный экран

Question

Я делаю веб-страницу для своего own business. Я выбрал Bootstrap, потому что он доступен для мобильных устройств. У меня возникла проблема:

• При доступе к веб-странице с помощью телефона (iPhone 5) изображение заголовка закрывается крупным планом, без увеличения масштаба.

Вот код:

#heading { 
    display: block; 
    width: 100%; 
    height: 543px;  
    background: url('../images/header.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    -webkit-box-shadow: inset 0 -4px 9px -3px #000; 
    -moz-box-shadow: inset 0 -4px 9px -3px #000; 
    box-shadow: inset 0 -4px 9px -3px #000; 
} 

@media(max-width:563px) { 
    #heading { 
    display: block; 
    width: 100%; 
    height: 300px;   
    background: url('../images/headerm.jpg') no-repeat center center fixed; 
    } 
    #navigation .navlinks li { 
    margin-right: 1px; 
    } 
    #navigation .navlinks li a { 
    padding: 0 5px; 
    font-size: 12px; 
    } 

} 

Я попытался с помощью другого размера изображений для запроса средств массовой информации, но это не сработало.

Here - ссылка для сценария тестирования. Если вы сжимаете свой браузер, чтобы имитировать экран телефона, изображение не закрывается. Он должен быть на телефоне.

Answer 1

@media(max-width:563px) { 
    #heading { 
    display: block; 
    width: 100%; 
    height: 300px;   
    background: url('../images/headerm.jpg') no-repeat center center scroll; 
    -webkit-background-size: 100% auto; 
    -moz-background-size: 100% auto; 
    -o-background-size: 100% auto; 
    background-size: 100% auto; 
    } 
} 

Должно работать. Изменить для прокрутки.