让背景图像“拉伸以适应”我的页面背景

Question

I have an image I would like to use as a background image but I need the height of it to stretch to fit 100% from header to footer, and then I can drop a background-color:black; behind it to make it perfect.

Is there any way to do this? Currently I am 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 I am guessing as if the image wasn't there.

Answer 1

If you aren't supporting older browsers you can use css3 to achieve this.

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

Answer 2

No, what you need to do is add an image tag inside the body and set the height to 100%. Apply any z-index tweaks with CSS so it remains behind your content.