Background Image Cover with CSS3

by

Timurtek Bizel

This is one of the best CSS techniques for the perfect full background image. There are a few different ways we can go about it. I prefer using a bit more dynamic approach.
Static CSS Class/ID:
This is ideal if you will use a full background image only once.
More Dynamic Approach:
When I use this method, I can call “full-bg-size” class as often as I want. The only requirement would be using the background-image property inline style.

.full-bg-size { 
  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;
}
<div class="full-bg-size-component" style="background-image: url('image-url.jpg');">
  //Content
</div>
.full-bg-size-component { 
  background-repeat: no-repeat; 
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

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

Timurtek Bizel

UX UI Engineer

I'm a passionate UX/UI Engineer who excels at bridging the gap between design and development teams. With fluency in both design and development languages, I bring the luxury of seamless communication and collaboration to every project. I am well-versed in translating design concepts into functional and visually captivating user interfaces. Additionally, my expertise extends beyond traditional development methods.

Blog posts

Articles, resources, and pieces of my mind... 🧠