I'm trying to setup a series of div's with a background image that each have their own fixed height, and stretch to fill up the width, even if there is overflow on the top/bottom that is clipped. I just don't want the white space on the edges.
Currently, I have: http://jsfiddle.net/ndKWN/
CSS
#main-container {
float:left;
width:100%;
margin:0;
padding:0;
text-align: center;
}
.chapter{
position: relative;
height: 1400px;
z-index: 1;
}
#chapter1{
background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
height:1200px;
}
#chapter2{
background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
height:1200px;
}
You can use background-size: cover;
But the thing is that the .chapter class is not dynamic you're declaring a height:1200px
so it's better to use background:cover and set with media queries specific height's for popular resolutions.
Source: Stackoverflow.com