Background images not showing in Mobile Safari? Try this..

Background images are great to improve the appearance of your website and commonly these images will easily show without a problem.

The simple code:

header .main, header.page {
 background-image:url("./images/mb-header-page-background-image.png"); 
}

This will trigger the background image and pull it in from the correct directory.

However, what if we want to do a little more with the background image than just set it to appear.

Let’s consider sizing, positioning and so forth.

However, one of the major issues I’ve been experiencing recently is getting the background image to show on Safari within an iPhone 5 SE environment.

The issue is best shown in the screen shot below:

The Background image should appear behind the logo.

I’ve tried various techniques including checking the image profiles (RGB vs sRGB) and even changing the image format from a .JPG to a .gif and .png, none of which appear to work.

So I attempted to to use the following code within a Media Query to get the image to display

header .main, header.page {
background-image:url("./images/mb-header-page-background-image.png"); 
background-position:center; 
background-attachment:fixed; 
-o-background-size:cover; 
-moz-background-size:cover; 
-webkit-background-size:cover; 
background-size:100% 100%; 
background-repeat:no-repeat;
}

Using the above creates the screen shot shown below, which is not exactly what we are looking for, sure the image is there, however it is stretched and not very attractive.

Further research revealed that in mobile Safari you need to set the background-attachment element to scroll and then Safari will accept the background-size as cover.

The end result being a background image that is now displaying on the website.

The solution

header .main, header.page { 
background-image:url("./images/mb-header-page-background-image.png"); 
background-position:center; 
background-attachment:scroll; 
-o-background-size:cover; 
-moz-background-size:cover; 
-webkit-background-size:cover; 
background-size:cover; 
background-repeat:no-repeat;
}

Leave a comment