Size a background image to fit container

Question

I want to stretch a background image (an SVG that may not be as big as it's container) to stretch or shrink to 100% of its container's width and 100% of its container's height.

If we have a background image that is narrower than its container:

background-image: url("../img/sky-gradients-01.svg");
background-repeat: no-repeat;

I want something that works similar to

object-fit: fill

a CSS rule which "stretches the image to fit the content box, regardless of its aspect-ratio."

I've tried:

/* stretches to fit the width, but maintains the aspect ratio, clipping the bottom */
background-size: 100%;

/* fits the height, but maintains the aspect ratio, leaving space at the both sides */
background-size: 100% 100%;

/* fits the height, but maintains the aspect ratio, leaving space at one sides */
background-size: contain;

/* stretches to fit the width, but maintains the aspect ratio, clipping the bottom */
background-size: cover;

/* original image size, space at sides and possibly bottom */
background-size: auto;

In all cases, all the background options maintain the aspect ratio. Are there any options that will fit without honoring the aspect ratio?

you need to edit the SVG and make sur you set preserve ratio to none — Temani Afif
The SVG didn't have a preserve attribute. Are you suggesting I add it, or disable it if it is set? — Wes Modes
you have to add preserveAspectRatio="none" tp the SVG; check this: developer.mozilla.org/fr/docs/Web/SVG/Attribute/… — Temani Afif

Nooby427 Nooby427 · Accepted Answer · 2020-05-07T03:35:37

-1

votes

If nothing else works, try using an image editor to make the image more rectangular.

Size a background image to fit container

1 Answers