06: Using SVG – SVG as background-image

Avatar of Chris Coyier
Chris Coyier on (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. We saw this effect on HTML5Hub.

See the Pen GAekv by Chris Coyier (@chriscoyier) on CodePen.