Full Page Background Image Cover with CSS3

This is one of the best CSS techniques for the perfect full background image. There are few different ways we can go about it. I personally prefer using a bit more dynamic approach.

  1. Static CSS Class/ID:
    This is ideal if you are going to use full background image only once.
  2. More Dynamic Approach:
    When I used this method I can call “full-bg-size” class as many times as I want, obviously. The only requirement would be, using background-image property inline style.

[code lang=”css”]
//Static CSS Class/ID
.full-bg-size-w-image {
background: url(‘image-url.jpg’) center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

//More Dynamic Approach
.full-bg-size {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
[/code]

[code lang=”html”]
<div class=”full-bg-size” style=”background-image: url(‘image-url.jpg’);”>
//Content
</div>

[/code]

Browser Compatibility: Chrome,Safari 3+, Firefox 3.6+, IE 9+, Opera 10+