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.

Files

Comments

  1. User Avatar
    Denny Tsai
    Permalink to comment#

    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;
    }
    
  2. User Avatar
    Giulia
    Permalink to comment#

    That’s awesome!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag