Background image not showing on iPad and iPhone

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

There's a problem with your CSS rule:

Your using the shorthand notation in which the background-size-property comes after the background-position-property and it must be separated by a /.

What you're trying to do is to set the position, but it will fail as auto is not a valid value for it.

To get it to work in shorthand notation it has to look like this:

background: url([URL]) 0 0 / auto 749px;

Also note that there's a value called cover, which may be suitable and more flexible here:

background: url([URL]) 0 0 / cover;

The support for background-size in the shorthand notation is also not very broad, as it's supported in Firefox 18+, Chrome 21+, IE9+ and Opera. It is not supported in Safari at all. Regarding this, I would suggest to always use:

background: url("background1.png");
background-size: auto 749px; /* or cover */

Here are a few examples and a demo, to demonstrate that behavior. You'll see that Firefox for example shows every image except the fist one. Safari on the other hand shows only the last.

CSS

section {
    width: 200px;
    height: 100px;
    border: 1px solid grey;
}

#section1 {
    background: url(http://placehold.it/350x150) auto 100px;
}

#section2 {
    background: url(http://placehold.it/350x150) 0 0 / auto 100px;
}

#section3 {
    background: url(http://placehold.it/350x150) 0 0 / cover;
}

#section4 {
    background: url(http://placehold.it/350x150) 0 0;
    background-size: cover;
}

Demo

Try before buy

Further reading

MDN CSS reference "background"
MDN CSS reference "background-size"

<'background-size'>
See background-size. This property must be specified after background-position, separated with the '/' character.

I hope this will help someone in despair. In my case, it was the size of the image that was too big, so the iPad just wasn't loading it (and it was right actually).

Diminishing its size and quality solved the loading issue.

The problem was not solved when I tried to use properly the background in shorthand. It works when I split the background property:

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

Reduce the image size if nothing else works -- iOS doesn't like large image sizes on mobile and simply won't display the image if it's too large.

Great fundamentals by @insertusernamehere! No matter what I did I couldn't get my image to show up...until, I went back to basics. The image size was too large and iPhone didn't like loading an image of that size, over 700kbs. So, I reduced it to 32kb and we were in action.

Background image not showing on iPad and iPhone

Related

Recent Posts