In this tutorial I'm gonna show you how to add fast and easy a background image for the whole web page. Here's an example of how it'll look alike:


Implementing the background image

It's as easy as appending a <img> to the <body>, and then setting some CSS settings for both:

  <!-- Image taken from www.marieclaire.co.uk -->
<img id="background" src="http://marieclaire.media.ipcdigital.co.uk/11116/00008c81a/3377_orh100000w440/Dog-Garticle-16.jpg" alt="My background image">

  body {
  /* This is needed to avoid blank spaces around the image */
  margin: 0;
}

img#background {
  /*
   * The position is for the image not taking too much height so a scroll bar appears.
   * Change its z-index so anything new that you insert in <body> will be visible and not troubled by the image
   */
  position: absolute;
  z-index: -1;

  /* Set it full width and height */
  width: 100%;
  height: 100%;
}


455 0 0