CSS: Making background image fit any screen resolution

Please see the revised solution for fixed backgrounds with scrolling pages:
CSS: Making background image fit any screen resolution (revised).

Making a background image fit any screen resolution is something everybody needs at least once in a lifetime. It is easy to create such effect, using CSS, and the result is quite good.
First of all, select your background image. Well, it seems that choosing is not really a big issue, but let me tell you that you need to do it carefully.
First of all, your background image should be large enough to fit your largest target screen size, but should not be too heavy in weight. As you may understand, the image's weight in bytes might affect your site speed.
Secondly, remember that a too bright image might disturb the correct balance of the content. It should be meaningful to the overall theme and content of the site. However, it should not be too invasive, distractive or in any way prevent the navigation of the site itself.
Ok, now that you have choosen your background image, let's get to the code.
Place a div at the bottom of your page, just before the tag:

As you may see, we have a class named "bg" in the image tag (the image is called BG.jpg). We are going to use a CSS style to stretch our image.

With the above style, the image is always stretched to the screen size, it is placed at the very top and left position, it has an absolute positioning and it stays at the backround (z-index).
Now if you resize your browser or the screen resolution, the image will adapt to the new size.
Piece of cake!


Please let me know what you think about it.