How to resize an image to fit in the browser window?

Question

This seems trivial but after all the research and coding I can\'t get it to work. Conditions are:

1. The browser window size is unknown. So please don\'t propose

Answer 1

My general lazy CSS rule:

.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}

This may zoom in on your image if it is low-res to begin with (that's to do with your image quality and size in dimensions. To center your image, you may also try (in the CSS)

display:block;    
margin: auto 0; 

to center your image

in your HTML: