Background Image not showing in iOs mobile Safari

iOs mobile Safari has a problem rendering fixed background images unfortunately. This is an iOs browser limitation. There is a CSS workaround for this, but note that the background display may not give 100% user experience though.

@media only screen and (max-width: 959px) {
body:before {
content: "";
background-image: url('your background url goes here');
background-size: cover;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

Or alternatively, just keep you current settings and then just change the fallback color to be consistent with your branding when your site is viewed on iOs devices.

Try adding this code to Other Scripts >> Custom CSS of your page settings:

@media only screen and (max-width: 767px){
body { background: #2ccca6 !important; }

Just replace #2ccca6 with your preferred color. This should help you give your readers a better background color when the background image does not work in iOs browsers.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.