Theory
Theory
Comments

Flexible Background with preserveAspectRatio

An SVG that is set as a background behaves the same as an inline SVG, so to get an elastic background, use an SVG with viewBox but no dimensions: in this case, the image will resize itself to the size of 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 parent element, 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:

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 is assigned to the .no-viewbox block without a viewbox, and it does not stretch.

Set a background image address has-viewbox.svg for the .has-viewbox block, and observe how the background with the viewbox behaves: The image fills the available space while maintaining its aspect ratio.
Set a background image address has-viewbox-psa-none.svg 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