underline
phone number

A creative, friendly web design company based in Chelmsford, Essex

back light

Fixed CSS Background Image on iPad Not Working?

If you’ve been relaxing, thinking your pretty solid CSS code for adding a fixed (or not fixed) background image to your website pages was foolproof, then it’s time to think again. The mobile smartphone revolution is one thing, but tablets and iPads just might be an additional issue…

Ok, I admit it – I got lazy and didn’t check one site with a fixed background image on my iPad; after all, it’s Internet Explorer that causes us designers all the problems right? Not necessarily so these days. But there is a fix for the CSS code for your fixed background image not working.

css fixed background image ipad

The Issue
Everything looks fine on your desktop, and maybe you’re now making sure your site has a smartphone specific version as well, so there’s no reason to think all is not well in the land of your CSS. But the iPad and similar tablets are generally being considered as ‘desktops’ or ‘laptops’ when it comes to the search engines, and so the desktop version of the website is the one that is best rendered on the iPad – and here’s where the problem is.

Here’s the surefire code you’ve added into your CSS:

Select Code
1
2
3
4
5
6
7
8
background-image: url(images/back2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
background-size: 100% auto; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-background-size: 100% auto; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% auto; /* Opera 9.5 */
-webkit-background-size: 100% auto; /* Safari 3.0 */

The -webkit- and -moz- shoehorns should cover everything dating back to the Jurassic age of CSS, you might think, but here’s where you might get a bit of a surprise. The chances are that your full width, full height background image is simply sitting at the top of your iPad tablet screen and the rest of the page is defaulting to white, possibly making text ineligible. iOS isn’t listening to what you’re telling it.

The reason, I believe, is due to the ‘effort’ needed to load such large images on mobile devices. It’s all about mobile optimisation and fast loading these days – but that’s another story, we simply want to fix our background image.

The Solution
It seems that the code you’ve been using for ages, while technically sound, is simply not working on your iPad or iPad Mini, but the solution is simple – although not readily available in the many forums out there as I write.

Simply replace the above CSS code with this (as part of your ‘body { }‘ code) and you have a fix for iPad iOS problems rendering your background image correctly:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
background-image: url(images/bg1.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;}

Of course, if you are going to add large background images to your websites, make sure their weight and resolution is as small as possible to optimise it for the web. Please add a comment if you find any problems with this working.

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , , , , , ,


Leave a Reply

Please complete the sum so we know you\'re a human... *