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 -->
<img id="background" src="" 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%;

637 0 0