You are viewing the OptimizePress 2.0 Help center. Click here for OptimizePress 3.0 support.
  1. Home
  2. Knowledge Base
  3. Customizations Questions
  4. Background Image not showing in iOs mobile Safari

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.

Was this article helpful?

Related Articles

Support Discontinued
As a discontinued platform, OptimizePress 2.0 is no longer officially supported. We recommend upgrading to our new OptimizePress suite. Click the button below to see our latest plans
Upgrade to OptimizePress 3.0