How to make small background image to fill whole screen

This seems easy to solve and for years I've refused to experiment with it during any of my spare time. Not until recently when I've got a project with this issue and I have to spend 1 hour to find the right solution. So I think I'd better put the whole topic here... just in case I forget again on how to solve it :)

Okay so for a regular web page we usually have this following CSS:

body{
	background-image: url(back.png); /* a 256 x 256 pixels image.*/
	background-repeat: no-repeat;
	background-position: top left;
}	
		

And the solution is simply adding 2 more lines to above code, as follows:

body{
	background-color: red; /*for testing purpose only: when shown, this indicates image has not been able to cover entire screen.*/
	background-size: cover;
	background-attachment: fixed;
}	
		

Questions

• Why don't I just use an image background large enough to fill entire screen? Well, a problem with large image is that it has larger bytes size and I almost always try to avoid that.
• What will happen when the image is already larger than the screen? Same thing.
• Will this work across browsers? Yes, all modern browsers I believe.
• I want to control it to appear at its center... Try to adjust CSS' background-position for this.

Comments

Your comment: Your Name: Your Web Presence: Submit