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 are going to use a full background image only once.
More Dynamic Approach:
When I used this method, I can call “full-bg-size” class as many times 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; }
React 16 – Component Version:
Here is the React version of full background covered image. You should check it out on full page view. I use this technique for a few of the projects I have worked for.
See the Pen React 16 - Full Bg Cover Component by Timurtek Bizel (@Timurtek) on CodePen.
Browser Compatibility: Chrome,Safari 3+, Firefox 3.6+, IE 9+, Opera 10+