Background Image Not Displaying Correctly in iOS

Background image not showing on iPad and iPhone

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.

Background Image not Displaying Correctly in iOS

Have you tried hardware acceleration? Add -webkit-transform: translateZ(0); to the same css as your adding the background. This is my guess because it appears to be a rendering issue and hardware acceleration fixes rendering issues when you use css transitions in Chrome.

#wrap {  
   margin:0 auto; 
   position:relative; 
   padding:0; 
   background: #B3B1B2 url(/images/bgs/parchment2.jpg);
   -webkit-transform: translateZ(0); 
}

Or maybe try retina display images for devices that support them using media queries?

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
  #wrap {  
   background: #B3B1B2 url(/images/bgs/parchment2_2x.jpg);
  }
}

Media Query source *

To solve the rendering issues you can try adding -webkit-transform: translateZ(0); to other tags that are also wrapping content on the page. This may prevent loading/rendering issues.

Background Images not displayed correctly on Iphone and Ipad

Hi Christin you should insert a media queries and replace the background-attachment for "scroll". Please see below:

@media only screen and (min-width: 768px){
.bg-1 {
background: url('../Dateien/sharkGround1920.jpg') no-repeat center center fixed;
background-size: cover;
background-attachment:scroll !important;
}
}

Background image not displayed properly on iPad and iPhone

I've found the following solution to fix the ipad and iphone problem:

    /* fix for the ipad */
@media (min-device-width : 768px) and (max-device-width : 1024px)  { 
    #home {
        background-attachment: scroll;
        /* default height landscape*/
        height: 768px;
    }

    .ipadfix{
        height: 300px !important;
    }
    img.ipadfix{
        width:100% !important; 
        height:auto !important;
    }
}
/* fix for the ipad */
@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: portrait) {
    #home {
        /* default height landscape*/
        height: 1024px;
    }
} 

/* fix for the iphone */
@media (min-device-width : 320px) and (max-device-width : 568px)  { 
    #home {
        background-attachment: scroll;
        /* default height landscape*/
        height: 320px;
    }

    .ipadfix{
        height: 150px !important;
    }
    img.ipadfix{
        width:100% !important; 
        height:auto !important;
    }
}
/* fix for the iphone */
@media (min-device-width : 320px) and (max-device-width : 568px) and (orientation: portrait) {
    #home {
        /* default height landscape*/
        height: 568px;
    }
} 

background images don't show/are stretched on iPad or iPhone

You can either:

• use a fixed position, with a background position center center: see "CSS background-size: cover replacement for Mobile Safari".
  
  This page refers to a background-attachment: fixed; as well, while remining use that viewport values (such as vh and vw) are technically supported on iOS 7 but simply do not work, hence the rodneyrehm/viewport-units-buggyfill project.
• or (less elegant), use fixed size for media with a given size: see "Background image not displayed properly on iPad and iPhone"

---

Related Topics