06: Using SVG – SVG as background-image

(Updated on )

SVG images can be used as background-image in CSS as well, just like PNG, JPG, or GIF.

.element {
  background-image: url(/images/image.svg);
}

All the same awesomeness of SVG comes along for the ride, like flexibility while retaining sharpness. Plus you can do anything a raster graphic can do, like repeat.

In this video we look at applying a “ripped paper edge” effect to the bottom of a module via background-image on an a pseudo element. Kind of a neat way to do it so the main element itself can have a solid background color we can match and let the page background bleed through the negative space in the SVG. Plus not need any markup to do it.

Files