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

SVGBackgrounds.com 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:

<style>
    body{
        *** paste code here ***
    }
</style>

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>