根据宽度缩放背景图像的高度

Question

I'm trying to set up a section with a background image with the width of the entirety of the page, and the height scaled based on the width.

I tried setting background-size: cover , but that didn't make any difference — the height of the background image stayed as the height of the content of the section.

Answer 1

You can set contain, cover and percent height

.backgroundCover {
      background-image: url(http://www.messletters.info/animated-backgrounds/71animatedbg.gif);
        background-size: cover;
}

.backgroundContain {
      background-image: url(http://www.messletters.info/animated-backgrounds/71animatedbg.gif);
        background-size: contain;
}
.backgroundPercents{
   background-image: url(http://www.messletters.info/animated-backgrounds/71animatedbg.gif);
        background-size: 100% 100%; 
}

See JSFiddle

Answer 2

You might want to look at background-size: contain;

To quote W3schools, contain achieves the following:

Scale the image to the largest size such that both its width and its height can fit inside the content area

Answer 3

Use contain

background-size: contain;

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

Answer 4

Try this: http://jsfiddle.net/fX5E8/ .

HTML:

<div></div>

CSS:

div {
    height: 500px;
    outline: 1px solid red;
    background: url(http://placehold.it/500x200/cccccc&text=Howdy)
                no-repeat
                0% 0%/100%;
}