06: Using SVG - SVG as background-image

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.

Comments

Denny Tsai

# February 19, 2016

Hello,
I was just wondering is this 40%px in the CSS file a typo or does it have some sort of meaning?

article {
  background: white;
  width: 40%px;
  padding: 20px;
  position: relative;
}

Chris Coyier

Permalink to comment# February 19, 2016

Definitely a typo! Thanks.
Humphreto

Permalink to comment# August 24, 2019

Yeah, it confuses the browser and so it will render error (invalid property). It is either you wrote 40px or 40%. “px” and “%” are both units. Only one of them can be used at a time :)
Jelle

Permalink to comment# May 22, 2021

I did not know this. Thanks for sharing Chris

Giulia

# July 26, 2016

That’s awesome!

Michael Wright

# March 20, 2019

Thanks for this!

Matt Gregg

# August 16, 2019

What’s the browser support on this?

Rahul

# July 2, 2020

How do I change that SVG color from white to something else?

David Spector

# May 23, 2021

Can background images be specified using “use” from an svg element defined in the HTML code?

They can be specified inline using CSS:

background: url(‘data:image/svg+xml;utf8,<svg…

Why can’t all the various methods for displaying an icon as a background image be included in just one article?

Comments

Leave a Reply Cancel reply