0
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:


<style>
  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 <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.

Thanks,
~iTechColumn

Post a Comment

 
Top