[Resolved] iPhone Background Image on Evolv Theme

Hi Lee-

The easiest and most sure-fire way to prevent this issue is to change the background “effect” from fixed to scroll or parallax. You can find that setting in the Customize > Background menu:

The reason is that iOS Safari still doesn’t handle the “background: fixed” effect when the size is set to “cover page” correctly. That being said, I tried out the following Custom CSS rules on an iPhone 6s Plus and it seems to work well:

@media (max-width: 991px) {
    body.custom-background {
        background-size: auto !important;
        max-height: 100vh;
        background-position: center top !important;
    }
}

Hi Lee-

You can do this by adding one more line to that Custom CSS from above:

@media (max-width: 991px) {
    body.custom-background {
        background-size: auto !important;
        max-height: 100vh;
        background-position: center top !important;
        background-color: rgb(32,32,32);
    }
}

That value of rgb(32,32,32) is based on what you’ve already got, although your site is actually using rgba(32,32,32,0.75). Using that will match the semi-transparent background you’re using now, but will be a little less readable.

Hi Lee-

Yes, absolutely. RGB colors like this one go on a scale of rgb(0,0,0) for completely black up to rgb(255,255,255) for completely white.

So you can simply increase the numbers in that rgb(32,32,32) to something like rgb(127,127,127) to make it an even gray, and adjust as needed until it looks the way you like it.

Hi Lee,

I sounds like there might be another CSS rule in the theme files that is overriding the custom background color in your CSS rule. There are a couple thing that you can try to make sure that your rule is respected as the page design is render and the first is to increase the specificity of the CSS selector. Try adding .palette-primary to the body.custom-background selector to see if that helps. The new code should look like this:

@media (max-width: 991px) {
    body.custom-background.palette-primary {
        background-size: auto !important;
        max-height: 100vh;
        background-position: center top !important;
        background-color: rgb(200,200,200);
    }
}

You could also add the !important flag after the background-color assist to guarantee that it will always take priority over any other background-color rules.

@media (max-width: 991px) {
    body.custom-background {
        background-size: auto !important;
        max-height: 100vh;
        background-position: center top !important;
        background-color: rgb(200,200,200) !important;
    }
}

Hopefully one of those methods helps you get the correct background color configured and please let us know if there is anything else that we can do to help!

Glad to hear it Lee! And thanks to Joseph for jumping in with the code to save the day.