Theory
Theory
Comments

Flexible Background with preserveAspectRatio

To get an elastic SVG background, use an SVG with a viewBox but no explicit dimensions: in this case, the image can resize with the element for which a background is set and will stretch together with it while maintaining the aspect ratio:

This is very convenient for icons: set the dimensions for the element that has the background, and the icon that is set as the background will stretch itself to match it.

If you do not want to maintain the same aspect ratio, add preserveAspectRatio="none". This is suitable for creating flexible backgrounds. In this task, background-size: 100% 100% makes the image’s viewport match the element’s dimensions:

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Flexible Background with preserveAspectRatio</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="background no-viewbox"></div> <div class="background has-viewbox"></div> <div class="background has-viewbox-psa-none"></div> </body> </html>

CSS

.background { height: 200px; background-repeat: no-repeat; background-position: 50% 0; background-size: 100% 100%; border: 2px solid gold; } .no-viewbox { background-image: url("no-viewbox.svg"); } .has-viewbox { } .has-viewbox-psa-none { }

Goalscompleted

The background image assigned to the .no-viewbox block is an SVG without a viewBox, and its drawing does not stretch.

Set has-viewbox.svg as the background image for the .has-viewbox block, and observe how the background with the viewBox behaves: The drawing scales to fit the available space while maintaining its aspect ratio.
Set has-viewbox-psa-none.svg as the background image for the .has-viewbox-psa-none block. Note how the background image is now stretched without preserving its aspect ratio, and the background is completely flexible.

Flexible Background with preserveAspectRatio

Comments

Log in

Sign up

Restore access