Full screen responsive background

This is a simple tutorial that teaches you how to create a full screen responsive background image for any sized screen or browser window using pure css code.
This method is cross-browser compatible and doesn’t require any javascript or flash. We can make full screen responsive by two methods:-

 

In first method we will add our image as background

HTML

<div class=”background”> </div>

 

CSS

body {
margin: 0;
}
.background {
width: 100%;
height: 100%;
background: url(http://www.hdwalley.com/wp-content/uploads/2015/10/pattern_wallpaper_pictures_background_2078_high_definition.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed; }

 

Demo


 
 

In second method we will add image in using image tag

HTML

<img class=”bg” src=”http://www.hdwalley.com/wp-content/uploads/2015/10/pattern_wallpaper_pictures_background_2078_high_definition.jpg”>

 

CSS

img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
}
@media screen and (max-width: 1024px) {
/* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px;
/* 50% */
}
}

 

Demo


 

Conclusion

We hope you will find this article useful. We are looking forward to hearing from you. We will be back with another more useful articles.

 

Ajay Malhotra

UI Developer & Designer

Leave a Reply

Your email address will not be published. Required fields are marked *