How To Use Svg In Background Css

Scaling of SVG backgrounds

Given the flexibility of SVG images, there's a lot to go along in mind when using them as background images with the background-prototype property, and fifty-fifty more than to keep in mind when also scaling them using the groundwork-size belongings. This article describes how scaling of SVG images is handled when using these properties.

The algorithm, in summary

The algorithm can for the most part be summarized by these 4 rules. There are some edge cases that aren't covered by these rules, but this covers the bulk of cases.

If background-size specifies a stock-still dimension (that is, percentages and relative units are fixed by their context), that dimension wins.
If the paradigm has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:ix, 4:iii, 2.39:one, 1:ane, then forth), the rendered size preserves that ratio.
If the image specifies a size, and the size isn't modified by constrain or cover, that specified size wins.
If none of the higher up cases are met, the image is rendered at the aforementioned size as the background area.

It's worth noting that the sizing algorithm simply cares most the image's dimensions and proportions, or lack thereof. An SVG image with stock-still dimensions volition exist treated just like a raster paradigm of the same size.

Note: If you are trying to stretch your SVG to a different aspect ratio with CSS—for example in order to stretch it over the page groundwork—make sure your SVG includes preserveAspectRatio="none". Find out more almost preserveAspectRatio.

Source image examples

Before diving in to wait at the results of using unlike kinds of source images and seeing how they await when used with groundwork-size, it would be helpful to wait at a few instance source images that accept different dimensions and sizing settings.

In each instance, we show what the source epitome looks like rendered in a 150x150 box, and provide a link to the SVG source.

Dimensionless and proportionless

This image is both dimensionless and proportionless. It doesn't intendance what size information technology is, nor does it intendance about remaining at a detail aspect ratio. This would make a good slope desktop groundwork that would work regardless of your screen size and its aspect ratio.

SVG source

1 specified dimension and proportionless

This prototype specifies a width of 100 pixels but no superlative or intrinsic ratio. This is, basically, a thin strip of wallpaper that could be stretched across the entire pinnacle of a block.

SVG source

One specified dimension with intrinsic ratio

This image specifies a 100 pixel superlative simply no width. It as well specifies an intrinsic attribute ratio of 3:iv. This ensures that its width:height ratio is always 3:iv, unless it's deliberately scaled to a disproportionate size (that is, by explicitly specifying both width and top that aren't of that ratio).

This is very much like specifying a specific width and superlative, since once you take one dimension and a ratio, the other dimension is unsaid, only it's still a useful case.

SVG source

No width or height with intrinsic ratio

This epitome doesn't specify either a width or a height; instead, it specifies an intrinsic ratio of 1:1. Think of this like a program icon. Information technology's always square, and is usable at any size, such as 32x32, 128x128, or 512x512, for example.

SVG source

Scaling examples

At present let'southward see some examples of what happens equally we apply different scaling to these images. In each of the examples below, the enclosing rectangles are 300 pixels broad and 200 pixels alpine. In add-on, the backgrounds have background-repeat fix to no-repeat for clarity.

Annotation: The screenshots below prove the expected rendering. Non all browsers currently render these correctly.

Specifying stock-still lengths for both dimensions

If you use background-size to specify fixed lengths for both dimensions, those lengths are always used, per dominion 1 above. In other words, the epitome volition always become stretched to the dimensions you specify, regardless of whether or not the source image has specified its dimensions and/or aspect ratio.

Source: No dimensions or intrinsic ratio

Given this CSS:

                                      background                    :                                          url                      (no-dimensions-or-ratio.svg)                                        ;                    background-size                    :                    125px 175px;

The rendered output would look like this:

Source: One specified dimension, no intrinsic ratio

Given this CSS:

                                      background                    :                                          url                      (100px-wide-no-height-or-ratio.svg)                                        ;                    background-size                    :                    250px 150px;

The rendered output would await like this:

Source: I specified dimension with intrinsic ratio

Given this CSS:

                                      background                    :                                          url                      (100px-pinnacle-3x4-ratio.svg)                                        ;                    groundwork-size                    :                    275px 125px;

The rendered output would wait like this:

Source: No specified width or summit with intrinsic ratio

Given this CSS:

                                      background                    :                                          url                      (no-dimensions-1x1-ratio.svg)                                        ;                    background-size                    :                    250px 100px;

The rendered output would await like this:

Using contain or cover

Specifying cover for background-size makes the picture as small as possible while still roofing the unabridged groundwork area. incorporate, on the other manus, makes the epitome as large as possible while not existence clipped past the background expanse.

For an image with an intrinsic ratio, exactly one size matches the cover/fit criteria alone. But if there is no intrinsic ratio specified, cover/fit isn't sufficient, and so the big/pocket-sized constraints cull the resulting size.

Source: No dimensions or intrinsic ratio

If an image doesn't specify either dimensions or an intrinsic ratio, neither dominion 2 nor rule 3 utilize, and so rule four takes over: the background image is rendered covering the entire background area. This satisfies the largest-or-smallest constraint.

                                      background                    :                                          url                      (no-dimensions-or-ratio.svg)                                        ;                    background-size                    :                    contain;

The rendered output looks like this:

Source: One specified dimension, no intrinsic ratio

Similarly, if the image has one dimension specified just no intrinsic ratio, rule iv applies, and the image is scaled to cover the entire groundwork surface area.

                                      background                    :                                          url                      (100px-wide-no-height-or-ratio.svg)                                        ;                    background-size                    :                    contain;

The rendered output looks like this:

Source: One specified dimension with intrinsic ratio

Things change when you specify an intrinsic ratio. In this case, rule 1 isn't relevant, so rule 2 is practical: we endeavour to preserve any intrinsic ratio (while respecting contain or cover). For example, preserving a three:4 intrinsic aspect ratio for a 300x200 box with contain means drawing a 150x200 background.

contain instance

                                      groundwork                    :                                          url                      (100px-peak-3x4-ratio.svg)                                        ;                    groundwork-size                    :                    comprise;

The rendered output looks like this:

Notice how the entire epitome is rendered, fitting equally best as possible into the box without clipping any of it away.

cover example

                                      groundwork                    :                                          url                      (100px-top-3x4-ratio.svg)                                        ;                    background-size                    :                    comprehend;

The rendered output looks like this:

Hither, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the epitome to be clipped abroad.

Source: No dimensions with intrinsic ratio

When using an epitome with no intrinsic dimensions but an intrinsic ratio, things work similarly.

contain case

                                      background                    :                                          url                      (no-dimensions-1x1-ratio.svg)                                        ;                    background-size                    :                    contain;

The rendered output looks like this:

Find that the image is sized to fit the smallest dimension while preserving the 1:one aspect ratio.

cover case

                                      background                    :                                          url                      (no-dimensions-1x1-ratio.svg)                                        ;                    background-size                    :                    encompass;

The rendered output looks like this:

Here, the epitome is sized and then that information technology fills the largest dimension. The 1:1 aspect ratio has been preserved, although with this source image, that can be difficult to see.

Automated sizing using "auto" for both dimensions

If background-size is set to auto or auto motorcar, rule 2 says that rendering must preserve whatever intrinsic ratio that'southward provided.

Source: No dimensions or intrinsic ratio

When no intrinsic ratio or dimensions are specified by the source prototype, rule iv takes outcome, and the image is rendered to fill up the groundwork area.

                                      groundwork                    :                                          url                      (no-dimensions-or-ratio.svg)                                        ;                    groundwork-size                    :                    auto car;

The rendered output looks like this:

Source: 1 dimension and no intrinsic ratio

If no intrinsic ratio is specified, but at to the lowest degree one dimension is specified, rule 3 takes effect, and we return the image obeying those dimensions.

                                      background                    :                                          url                      (100px-wide-no-pinnacle-or-ratio.svg)                                        ;                    background-size                    :                    auto automobile;

The rendered output looks like this:

Note hither that the width, which is specified in the source SVG at 100 pixels, is obeyed, while the height fills the groundwork expanse since it's non specified (either explicitly or by an intrinsic ratio).

Source: One dimension and an intrinsic ratio

If we have an intrinsic ratio with a fixed dimension, that fixes both dimensions in place. Knowing 1 dimension and a ratio is, as has been mentioned already, the same as specifying both dimensions explicitly.

                                      background                    :                                          url                      (100px-summit-3x4-ratio.svg)                                        ;                    groundwork-size                    :                    auto auto;

The rendered output looks like this:

Since this image has an explicit 100 pixel height, the 3:4 ratio explicitly sets its width at 75 pixels, so that'due south how information technology's rendered in the car case.

Source: No fixed dimensions with intrinsic ratio

When an intrinsic ratio is specified, but no dimensions, rule four is applied — except that rule two also applies. The image is therefore rendered simply similar for the contain example.

                                      background                    :                                          url                      (no-dimensions-1x1-ratio.svg)                                        ;                    background-size                    :                    machine auto;

The rendered output looks like this:

Using "auto" and 1 specific length

Given dominion 1, specified dimensions are always used, so we need to use our rules only to determine the second dimension.

Source: No dimensions or intrinsic ratio

If the epitome has no dimensions or intrinsic ratio, rule 4 applies, and we use the background area's dimension to determine the value for the auto dimension.

                                      background                    :                                          url                      (no-dimensions-or-ratio.svg)                                        ;                    background-size                    :                    auto 150px;

Here, the width is adamant using the background area'south width per rule 4, while the height is the 140px specified in the CSS.

Source: One specified dimension with no intrinsic ratio

If the image has ane specified dimension simply no intrinsic ratio, that specified dimension is used per rule 3 if that dimension is set to auto in the CSS.

                                      groundwork                    :                                          url                      (100px-wide-no-peak-or-ratio.svg)                                        ;                    background-size                    :                    200px auto;

Here, the 200px specified in the CSS overrides the 100px width specified in the SVG, per dominion 1. Since there's no intrinsic ratio or peak provided, auto selects the height of the background area as the height for the rendered image.

                                      background                    :                                          url                      (100px-wide-no-meridian-or-ratio.svg)                                        ;                    background-size                    :                    auto 125px;

In this instance, the width is specified equally auto in the CSS, so the 100px width specified in the SVG is selected, per rule 3. The height is set at 125px in the CSS, then that is selected per rule 1.

Source: 1 specified dimension with intrinsic ratio

When a dimension is specified, rule 1 applies that dimension from the SVG to the rendered background unless specifically overridden past the CSS. When an intrinsic ratio is besides specified, that's used to determine the other dimension.

                                      background                    :                                          url                      (100px-height-3x4-ratio.svg)                                        ;                    background-size                    :                    150px auto;

In this example, we use the width of the image specified in the CSS set up at 150px, then rule 1 is applied. The intrinsic 3:iv aspect ratio and so determines the height for the machine case.

Source: No specified dimensions with intrinsic ratio

If no dimensions are specified in the SVG, the specified dimension in the CSS is applied, so the intrinsic ratio is used to select the other dimension, per rule 2.

                                      groundwork                    :                                          url                      (no-dimensions-1x1-ratio.svg)                                        ;                    background-size                    :                    150px car;

The width is fix by the CSS to 150px. The car value for the elevation is computed using that width and the 1:1 aspect ratio to be 150px as well, resulting in the image above.

See too