Cover body with background-image

Question

I have a webpage with a fixed height . Now I want to fill the whole body with a background-image. The background has to zoom-to-fit .

I tried the background-size: cover , which does exactly what I want, though the height overflows the body . An example: http://jsfiddle.net/7c6o4aox/1/ .

How do I make the background-image cover only the body? Is it possible to set a max-height on the background?

Answer 1

The problem is caused by the tendency of the browsers to let properties of body be used by html as well. In this case, the background-image is applied to html .

To avoid this, one solution is to put a wrapper element around the whole page content, and give most of the styles you used for body to it. Properties for, in this case, main don't get applied higher up in the DOM tree.

 body { margin: 0; } main { background: url(http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg) no-repeat center; background-size: cover; } #content { border: solid red 3px; color: yellow; } 

 <main> <div id="content"> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> </div> </main>