CSS Div Background Image Fixed Height 100% Width

Question

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;
}

"whitespace on the edges" ... Did you mean the "global" padding of the body? Then try: `body { padding: 0px; margin: 0px; }` ? — Stefan Brendle, Mar 30 '13 at 00:55
The body padding and margin are both 0; The problem arises when you view the page on a browser with a width that exceeds the width of the image. The background image doesn't fill horizontally. — TheButlerDidIt, Mar 30 '13 at 00:58

score 63 · Accepted Answer · edited Jul 26 '23 at 15:05

See my answer to a similar question here.

It sounds like you want a background-image to keep it's own aspect ratio while expanding to 100% width and getting cropped off on the top and bottom. If that's the case, do something like this:

.chapter {
    position: relative;
    height: 1200px;
    z-index: 1;
}

#chapter1 {
    background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
}

jsfiddle: http://jsfiddle.net/ndKWN/3/

The problem with this approach is that you have the container elements at a fixed height, so there can be space below if the screen is small enough.

If you want the height to keep the image's aspect ratio, you'll have to do something like what I wrote in an edit to the answer I linked to above. Set the container's height to 0 and set the padding-bottom to the percentage of the width:

.chapter {
    position: relative;
    height: 0;
    padding-bottom: 75%;
    z-index: 1;
}

#chapter1 {
    background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
}

jsfiddle: http://jsfiddle.net/ndKWN/4/

You could also put the padding-bottom percentage into each #chapter style if each image has a different aspect ratio. In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value.

score 21 · Answer 2 · answered Mar 30 '13 at 00:57

21

http://jsfiddle.net/ndKWN/1/

You can use background-size: cover;

answered Mar 30 '13 at 00:57

Juan Rangel

1,763
1
18
34

1

Bear in mind `background-size`'s support: IE9+, Opera 10+, Firefox 4+, Chrome – MMM May 02 '13 at 14:53

score 4 · Answer 3 · answered May 04 '15 at 14:13

4

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.

answered May 04 '15 at 14:13

Fabian Rios

171
1
7

CSS Div Background Image Fixed Height 100% Width

3 Answers3

Linked