Full Page Background Image Using CSS Only

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?

The CSS code:

  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; }

HTML Markup:

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


We set the background using the <img> tag of HTML. We also assign the tag with a class name as “background“.
Now using CSS, the background image is set to fixed with the attribute position:fixed; top:0; and left:0;
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.


Previous articleHow to Fade Div Elements Using jQuery Opacity Animation?
Next article35 Link Styling And Link Hover Effects Using CSS
Karan Vyas is the founder at itechcolumn.com, Completed his B.Tech in ECE. He is passionate blogger, Web Developer having vast knowledge on Reverse engineering, Programming, Search Engine Optimization. He's Certified Ethical hacker as well due to his Interest. Apart from this he has knowledge in Witchcraft Black magic and Hypnotism.