How to make small background image to fill whole screen

7:50 AM 8/25/2018

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