Solution 1 :

To make the height change proportionally to the width, you can use vw to specify the height, for example:

.rooterDeco {
    height: 20vw;

Solution 2 :

maybe for a size of 100% it will work

 background-size: 100% 100%;

using percentage makes the element one size relative to the size of the parent element.

Solution 3 :

You can use aspect-ratio.

.footerDeco {
  aspect-ratio: 16 / 9;
  background: url(;
  background-size: cover;
<div class="footerDeco"></div>

Problem :

I’m working on a project where I have to give a background-image a full width. The image should become larger as I make the screen larger, and smaller as I make the screen smaller.

This is my code at the moment. It’s a footer decoration:

.footerDeco {
  background-image: url(../resources/image_geometry_2.svg);
  background-repeat: no-repeat;
  height: 160px;
  background-size: cover;

The background-size: cover makes the image adapt to full width, but the height of the image remains 160px no matter what. If I make the height larger, then it’s a problem because it doesn’t shrink back proportionally as the screen becomes smaller.

I have tried giving it a height auto or a height 100% expecting the height to change proportionally to the width. (I do understand this height is the height of the footer container, but I don’t know how to change it otherwise).

I know it would be much easier to use an img tag. But the demands of the project and good practice insist that since this is a decoration, I should use the background-image property. Is it possible? Thanks!

P.S.: There are similar questions that have been answered here, but none of them (as far as I can tell) solve the problem of the image resizing past the constant container height of 16px.