How to make a responsive full screen background image in HTML5

Bringing an image to a web page is easy as we can use <img src… tag. But what if we want to use an image as a background image? It is also easy. You can search for it on internet. But, there is more, how to make this background image in full screen mode, center fixed, filling the screen, with maintained aspect ratio, I mean not stretched? The answer is this few lines of css codes:

background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Leave a Reply

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