Background-size:cover doesn't work on iPhone 4 or 5

Question

I'm trying to teach my little sister how to program, so we both made this together.

However for some reason, the background image won't cover the whole screen (when I use background-size:cover; on iPhone 4 and 5 devices, it seems like other browsers, desktops, and smartphone sizes are fine.

Why is this?

function changeBackground(){

    var photo_num = Math.floor((Math.random() * 40) + 1);


    var photo_str ="assets/img/"+photo_num+".jpg";

    document.getElementById("background_image").style.background = "linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.5)), url("+photo_str+") no-repeat center center fixed"; 
    document.getElementById("background_image").style.backgroundSize ="cover";

    changeQuote();

}

This is the function that changes the Photo and Text.

possible duplicate: [CSS background-size: cover replacement for Mobile Safari](http://stackoverflow.com/questions/18429620/css-background-size-cover-replacement-for-mobile-safari) — Michael Benjamin, Aug 23 '15 at 00:51
I'm sorry but that solution didn't work I should have noted that in my question. — Rohit Tigga, Aug 23 '15 at 01:53
have you tinkered with the `background-attachment` property? — Michael Benjamin, Aug 23 '15 at 02:09

score 0 · Answer 1 · answered Aug 23 '15 at 01:29

0

The iPhone version is not as important as the iOS version. I am guessing you are running an older version of the OS. Mobile Safari did not fully support background-size:cover until iOS 7.1

answered Aug 23 '15 at 01:29

rzzo

1
3

@RohitTigga What is the iOS version running on those phones? – rzzo Aug 24 '15 at 16:09

score 0 · Answer 2 · answered Sep 09 '15 at 22:12

This has been bugging me for ages!

Turns out iOS has a strop when you try to use background-attachment :fixed;

So your best bet is to fallback with a media query like

@media (max-width: 800px) {
    #background_image {
    background-attachment: scroll !important;
   }
}

Background-size:cover doesn't work on iPhone 4 or 5

2 Answers2