Background image not showing on iPad and iPhone

Question

I want to create a section with a background covering it in a mobile web page, so I was using the following CSS code:

#section1{
    background: url("background1.png") auto 749px;
    height: 749px;
}

The background is showing correctly on Android (Chrome, Firefox ...), but it is not showing at all on iPhone or iPad (Safari, Chrome iOS ...). I have tried to set these properties using jQuery when the DOM is ready, but no luck. I read that the size might be a problem, but the image is about 700kB (1124x749px) so it should accomplish the Safari Web Content Guide rules. Which is the problem?

Answer 1

I didn't see anyone specifically say this, but you have to define the width too. Makes since, since I set the background size to "contain" - it has to know what the container's dimensions are.

Once I did, the background rendered as expected.

@media only screen and (max-width:599px) {
  [id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; }
}

@media only screen and (max-width:479px) {
  [id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; }
}

Note: The background URL needs to be defined for both breakpoints so that it works for iPhone 5 (iOS7).

Answer 2

My problem was that iOS doesn't support background-attachment: fixed. Removing that line made the image appear.

It looks like there are workarounds for a fixed background image though: How to replicate background-attachment fixed on iOS