Perfect Full Page Background Image With Awesome, Easy, Progressive CSS3 Way

Posted: May 13, 2011 in CSS
Tags:

We can do this purely through CSS thanks to the background-size property now in CSS3. We’ll use the html element (better than body as it’s always at least the height of the browser window). We set a fixed and centered background on it, then adjust it’s size using background-size set to the cover keyword.

html {          
background: url(images/bg.jpg) no-repeat center center fixed;         
-webkit-background-size: cover;         
-moz-background-size: cover;         
-o-background-size: cover;         
background-size: cover; }

Works in:

  •  Safari 3+
  •  Chrome Whatever+ IE 9+
  •  Opera 10+ (Opera 9.5 supported background-size but not the keywords)
  •  Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

The demo link is below :

Demo

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