CSS: Making background image fit any screen resolution (revised)

Tweet

After the great success of my previous post "CSS: Making background image fit any screen resolution" I would like to share a new version of the same.
The following is just a revised post, so basically it contains the same code, but with a twist.
The point is that many readers have asked me how they could have a scrolling page while the image stays stretched and fixed.
Well... I suppose you could get there and find how to do it by yourself, but I thought I could share it anyway, maybe for those of you that are not really experienced enough already (time to grow ladies and gentlemen - I'm joking... obviously...). We are going to use a few CSS lines and two HTML tags.

Ok, let's get into it!

CSS: Making background image fit any screen resolution

Tweet

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.