The header image is closing up when mobile screen

Question

I'm making a webpage for my own business . I chose Bootstrap because it comes mobile-capable out of the box. I'm having a problem:

• When accessing the webpage using a phone (iPhone 5) the header image does a close up, zooming in with no proportions.

Here is the code:

#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;
  }

}

I tried using a different size image for the media query, but it didn't work.

Here is the link for testing scenario. If you shrinks your browser to simulate phone screen, the image doesn't do the close up. It has to be on a phone.

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;
  }
}

Should work. Change fixed to scroll.