0

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.

BrOSs
  • 909
  • 4
  • 10
  • 27
  • this would make you go a little further: http://stackoverflow.com/questions/5559764/background-image-scaling-while-maintaining-aspect-ratio – reikyoushin Jul 29 '13 at 18:10

1 Answers1

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.

Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
  • Is it possible the image fits the width automatically? It is not closing up anymore, but it doesn't fit the screen. May be changing the image size again ? You can take a look now to the [test link](http://www.crossfit24.mx/test) to see the modified version. – BrOSs Jul 29 '13 at 17:15