Full page background image that works on all browsers and even iphones (ios)!

Hi there,

One page sites pretty popular on the web and they work great for scrolling on mobile. Full page backgrounds can also look pretty cool. Unfortunately background-size:cover and background-attachment: fixed don’t really work on ios (safari, chrome, anything on an iphone really)! You often get a really stretched out image or no image shows at all!

I created a few one page sites recently and couldn’t get it to work. I realise now that my problem was background-attachment:fixed. The solution is to actually make the div fixed and not use background-attachment at all. This solution only needs CSS.

Here’s an example:

HTML

<html lang="en">
<head></head>
  <body>
<div class="bkgdImage"></div>
<header>
   </header>
     <section id="homeContainer">
       //content etc
     </section>
  </body>
</html>

Notice the empty div with the class ‘bkgdImage’? That’s the key.  Don’t put the background image on the body. You could put the background image on the body. And make the body fixed as is done here. But this way seems to be easier.

CSS

html{
height: 100%;
min-height: 100%;
}
body {
 min-height: 100%;
 width: 100%;
height: 100%;
margin: 0;
}
.bkgdImage {
 position: fixed;
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100; (so it's behind your content)
 margin: 0;
 background: url(../yourimage.jpg) center center no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
 Voilà. If you want to see it in action check out my portfolio site: Goodlooking.co.nz
I’ve tested this on safari and chrome on my iPhone 5 and on chrome on my samsung.  It works! Let me know if you have any problems in the comments.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s