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.
//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;
}
<div class="full-bg-size" style="background-image: url('image-url.jpg');">
//Content
</div>

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

Leave a Reply

  • Newsletter