Easy way to create a full width background image using only CSS.

Full Page Background Image Using CSS Only

Sometimes, it is common to see some websites where the contents are scrolling whereas the background is stationary. It looks nice to set the background image to something cool like a scenery or nature photography. The problem with a non-fixed background image is, the images needs to be scaled down or the images needs to be repeated in order to cover the entire length of your website’s contents. But, with the CSS method am going to show will definitely save you from that problem.

What are we going to achieve?

  img.background {   /* Set rules to fill background */   min-height: 100%;   min-width: 1024px;     /* Set up proportionate scaling */   width: 100%;width:auto;   height: auto;     /* Set up positioning */   position: fixed;   top: 0;   left: 0;  }

  #content-wrapper { position: relative; width: 430px; margin: 30px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }</style>

HTML Markup:

<img class="background" src="http://background-image.jpg" />
<div id="content-wrapper">
Your content here
</div>

Explanation:

We set the background using the Now using CSS, the background image is set to fixed with the attribute Scaling of the width and height is made to auto with width set to 100% for IE fix.Similarly, the min-height and min-width are set.

Note: don’t forget to replace the code in blue(http://background-image.jpg) to your image URL.

Please share your thoughts on this tutorial via comments. Please don’t forget to subscribe to my RSS feed from the below box.

Thanks,
~iTechColumn

About The Author

Karan Vyas is the founder at itechcolumn.com, a 19 year old student pursuing his B.Tech in ECE.He is passionate blogger,Web Developer having vast knowledge on reverse engineering,hacking,software developement.Apart from this he is involved in witchcraft black magic and hypnotism.

Leave a Reply

Your email address will not be published.