Div фон больше, чем высота окна не будет масштаб

Question

У меня есть изображение, которое должно использоваться в качестве фона для серии «слайдов», которые содержатся в одной странице. Всего четыре слайда. Каждый слайд - это высота экрана. Поэтому мне нужно, чтобы фон был высотой экрана 4x. Мне также хотелось бы, чтобы изображение масштабировалось с шириной экрана. Изображение очень высокое, и не имеет значения, какая часть фона находится на каждом слайде, поэтому сохранение пропорций не должно быть проблемой.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я создаю окно шириной меньше ширины изображения, часть изображения обрезается, а не масштабируется до ширины экрана. Мой CSS до сих пор:

#container { 
    position:relative; 
    height:100%; 
} 
#background { 
    position:absolute; 
    width: 100%; 
    height:400%; 
    background:url(photo.png); 
} 
.slide { 
    width: 100%; 
    height:100%; 
    position:relative; 
} 

И HTML:

<div id="container"> 
    <div id="background"></div> 

    <div class="slide"> 
     Content 1 
    </div> 
    <div class="slide"> 
     Content 2 
    </div> 
    <div class="slide"> 
     Content 3 
    </div> 
    <div class="slide"> 
     Content 4 
    </div> 
</div> 

Обратите внимание, должны быть совместимы с IE8 и выше (то есть CSS3 материал)

Answer 1

Может быть, вы могли бы использовать что-то вроде этого:

<div id="background"> <img src="img.jpg" class="stretch" alt="" /> </div>

и чем в CSS

#background { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0; 
} 

.stretch { 
    width:100%; 
    height:100%; 
} 

Я не знаю, почему вы не хотите использовать css3, может быть, у вас есть хорошая цель, но я бы порекомендовал использовать это.

код CSS3 является:

background-size: 100%; 

Answer 2

Вы можете использовать CSS3 свойство Background-size

#background { 
    background-size: 100%; 
    }