Perfectly Working Full Width Background Image CSS

This tutorial explains the CSS code which can make the background image of a website full width and stay stable on different resolutions.

Full-Size-Background-Image

Check out the demo before going through the HTML and CSS:

DEMO


HTML:

The complete CSS which does the magic:

The CSS code above is self explanatory. I’ve inserted comments in the CSS to help the code more¬†understandable and easy to debug.

In the demo page, use the browser’s CTRL and PLUS(+)/MINUS(-) key to change the browser resolution to see the fixed effect of the background.

If you have any doubts and questions, please let us know by commenting below.

Enjoy!

Vinod

Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...