SVG DataURI in CSS not working in Firefox

Question

body {
  background: url(\"data:image/svg+xml;utf8,

Answer 1

When you use background-image reference the svg as a file with a a path. background-image: url(http://www.domain.com/path/img.svg);

So put all of that code that makes the svg into a text file, then change the extension from .txt to .svg

If you want to use it inline convert your svg with this tool: http://www.mobilefish.com/services/base64/base64.php

.imgSVG {
  background: url("data:image/svg+xml;base64,[data]");
}

[data] portion is where you place whatever you get from the online tool.

SVG: https://css-tricks.com/using-svg/ URI: https://css-tricks.com/data-uris/