Have a stretch to fit background image on my page background

Question

I have an image that I would like to use as a background image, but I need it to stretch to fit 100% from the header to the footer, and then I can remove the background color: black; after him to make him perfect.

Is there any way to do this? I am currently trying to use this CSS:

#wrapper .bg{ background: url(../images/sky.png) no-repeat; position:absolute; top:0; left:0; width:100%; height:100%; display:block; z-index:-1; } 

This ends up leaving some space between the image and the footer, the same amount that I guess as if the image was not there.

Answer 1

No, you need to add an image tag inside the body and set the height to 100%. Use any Z-index tweaks with CSS so that it remains behind your content.

Answer 2

If you do not support older browsers, you can use css3 for this.

 body { background-image: url(myimage.png); background-size: cover; }