My background image doesn't fill the whole screen and gets smaller on getting the page size smaller(CTRL -)

Question

I'm trying to share some knowledge by posting some css tricks questions(and jquery tricks in another topics) and answer it.
Here I'm dealing with css very simple issue, background doesn't fill the whole screen(<100% width, <100% height) and when CTRL - (getting the webpage size smaller) the background image gets smaller.
For example: http://jsfiddle.net/YEksu/3

Answer 1

just add background-size: cover; to the css.
Here's example: http://jsfiddle.net/YEksu/2