iPhone /平板电脑上未显示背景图片

Question

I have a background image that's not showing up on the iphone/tablet! The funny thing is that if you use a laptop but set the window size to that of an iphone/tablet, it still shows up (try resizing the site).

#intro {
background: url('imageurlhere') no-repeat right fixed;
background-color: #fdfdfd;
-webkit-background-size: 50% 125%;
-moz-background-size: auto 125%;
-o-background-size: auto 125%;
background-size: auto 125%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imageurlhere', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imageurlhere', sizingMethod='scale')";
padding-top: 10%;
}

if i take off the "fixed" parameter, it will show but parallax will be gone.

Is there any way to fix this? Thanks!

Answer 1

The problem was in the position-y: fixed of the convenience property.

Safari on iOS didn't recognize fixed so it ignored the whole rule (see attached screenshot).

Remove:

background: url(http://i.imgur.com/CVJVeWw.jpg) no-repeat right fixed;

and add instead:

background-repeat: no-repeat;
background-size: auto 125%;
background-position-x: right;
background-position-y: fixed;
background-image: url(http://i.imgur.com/CVJVeWw.jpg);

Update see background-position-y and background-attachment: fixed

I played with this a bit more to see if I could get it working a bit better for you. For some reason, when both background-attachment: fixed; and background-position-x: right; are specified on iOS 6x, the background goes missing. However, by resetting background-attachment: fixed; to initial the image displays although you do lose the parallax.

So: try this for desktop:

#intro {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
    background-image: url(http://i.imgur.com/rKJbwgL.jpg);
    background-color: #fdfdfd;
    -webkit-background-size: 110% 110%;
    -moz-background-size: auto 125%;
    -o-background-size: auto 125%;
    background-size: auto 110%;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i.imgur.com/rKJbwgL.jpg', sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i.imgur.com/rKJbwgL.jpg', sizingMethod='scale')";
    padding-top: 10%;
    margin-right: -10%;
}

Then in a media query for phone/tablet, reset background-attachment:

background-attachment: initial;

Let me know if that works a bit better for you.