Background image not displayed properly on iPad and iPhone

Question

I've encountered an odd issue. I've been building this website using bootstrap3 and everything seems to work fine, until I try it on the iPad or iPhone. My background image seems to be rendered wrong. It is stretched way too much and you have to scroll 10 times until you reach the first content.

This is my website where the issue is found: www.socialook.net

Here is the CSS for the section with issues:

#home {
background: url(img/background.png) no-repeat center center fixed; 
height: 100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#e6e6e6;
text-align: center;}

UPDATE: I changed height:100% instead of height:100vh and nothing really changed in ipad or iphone. The image is very zoomed.

Also, eliminating the height completely will cause the background picture to have a height of only about 5px. Any ideas?

Can you provide more info like what element is getting the id `#home`, is it `body`, `html` or a `section`? Right now I'm guessing your site is a one-pager and the `#home` is just the ID of one section. — Laniakea, Apr 04 '14 at 14:35
Are the iOS devices in question using iOS7? Apparently support is buggy for vh in iOS6: http://caniuse.com/viewport-units — cjspurgeon, Apr 04 '14 at 18:58
@MartinMetsalu - the #home is used for a section in the body of my main page. I updated with the website. — RemusT, Apr 08 '14 at 08:44
@cjspurg - strange thing is that the issue seems to happen on iOS7, both on chrome and safari. What would you use as a replacement for the vh property? — RemusT, Apr 08 '14 at 08:46

score 4 · Accepted Answer · answered Apr 11 '14 at 14:33

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;
    }
}

So your issue with **"Background image not displayed properly on iPad and iPhone"** is solved? — Laniakea, Apr 15 '14 at 07:38
Only solution that worked for me. Add the media queries to your CSS style sheet etc... Then change the element ID to what your background image element ID / Class is. Also add the `.ipadfix` to the same element. Save files, refresh page and Then it worked. — Corey B, Nov 06 '19 at 05:34

Laniakea · Answer 2 · 2014-04-09T13:44:38.913

1

Changing height from 100vh to 100% loses the scrolling bug:

#home {
    background: url(img/background.png) no-repeat center center fixed; 
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color:#e6e6e6;
    text-align: center;
}

but then your background-image is still not displayed correctly. I'm looking for a way around this.

UPDATE:

This is the closest I've got in order to get the image to look 'normal':

@media (max-width: 425px) {
    #home {
        background-size: 100% 14% !important; 
        zoom:1;
        } 
}

edited Apr 09 '14 at 13:44

answered Apr 08 '14 at 13:51

Laniakea

894
8
27

Thanks a lot Martin. I do need for the background height to be the size of the device height. – RemusT Apr 09 '14 at 13:12
Please have a look at my update and see if it helps. – Laniakea Apr 09 '14 at 13:37
Martin, how about the ipad? It also doesn't work there. Would it be feasible to add a media query for each screen size and set the height for that device manually? I also tried (without success) to create a media query for ipad and iphone exact screen sizes and to change 100vh to 100%. It didn't work however – RemusT Apr 10 '14 at 07:51

Background image not displayed properly on iPad and iPhone

2 Answers2

Linked