Иметь фоновое изображение "растянуть, чтобы соответствовать" фон моей страницы

Question

У меня есть изображение, которое я хотел бы использовать в качестве фонового изображения, но мне нужно, чтобы его высота растягивалась до 100% от верхнего до нижнего колонтитула, а затем я могу добавить цвет фона: черный; за ним, чтобы сделать его идеальным.

Есть ли способ сделать это? В настоящее время я пытаюсь использовать этот 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;
}

В результате остается некоторое пространство между изображением и нижним колонтитулом, такое же количество, как я предполагаю, как если бы изображения не было.

Answer 1

Если вы не поддерживаете старые браузеры, вы можете использовать css3 для достижения этой цели.

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

Answer 2

Нет, вам нужно добавить тег изображения внутри тела и установить высоту 100%. Примените любые настройки z-index с помощью CSS, чтобы он оставался позади вашего контента.