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.

Nicki Minaj Website

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.

Answer 1

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

Answer 2

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