What does the CSS background snippet include?

url(), center, contain, and no-repeat so the SVG sits as one icon instead of a repeating tile.

How is this different from background-image?

The shorthand also sets position, size, and repeat. background-image only sets the image.

Yes after you copy. Contain keeps the whole mark visible; cover fills the box and may crop.

No. Root width and height are omitted so contain/cover control the painted size.

FAQ

Quick answers

What does the CSS background snippet include?: url(), center, contain, and no-repeat so the SVG sits as one icon instead of a repeating tile.
How is this different from background-image?: The shorthand also sets position, size, and repeat. background-image only sets the image.
Can I change contain to cover?: Yes after you copy. Contain keeps the whole mark visible; cover fills the box and may crop.
Does the sample SVG have a fixed pixel size?: No. Root width and height are omitted so contain/cover control the painted size.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B