SVG Background Demo

Where to put the CSS code

This is a simple demonstration of the right and wrong methods to display SVG backgrounds using our CSS output. The CSS output is a background-image with a SVG converted to a data URI.

The correct method outputs CSS code that will only work in a CSS file (style.css) or directly on an HTML webpage within style tags as shown directly below:

        *** paste code here ***

The wrong method

Do not use inline CSS.
The outputed SVG code consists of BOTH single and double quotes. The code will not play nice inside style attributes ( style=' xxxx ' or style=" xxxx " ) which rely on BOTH single and double quotes.

Inline CSS will not work, DO NOT use this method:

<div style=' *** code won't work here *** '></div>
Matt Lipman Headshot

Hi, I'm Matt, the designer behind SVG Backgrounds. Check out my latest visual tools I'm building at or follow me on Twitter.