From the course: Creating Web Icons with SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Add SVG as a background image

Add SVG as a background image

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Add SVG as a background image

“

- [Voiceover] In the previous movies, we've been talking about how to display individual SVGs as independent objects within a page. The key here is that the SVGs are part of the overall markup, an element on the page itself. Now is the time to look at how we can use SVGs as background elements in CSS because, as you know, when you have a box in a webpage, you can always inject a background image behind it using CSS. On the page right now, we're already doing that down here in the tags section. Each of these two tags you see is actually a PNG that's being generated through CSS. If I go to the exercise files for this movie, 03_06, and go to style.css and make a search for tag, you'll find the actual code that injects that tag right down here, .tag: :before, and all we're doing is displaying the background image in a box that is big enough to contain it on the page. This is a standard way of displaying icons instead of putting the icon into the markup and make it all confusing, we've…

Contents