qrohlf
commented
10 years ago You can do something like:
.my-element {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iM...);
}However, if you're using the noise effect at all I'd caution against this because it's going to have a rendering delay for your visitors. Instead, you can convert the image to a raster format like jpeg or png and use it like a normal CSS background - You should be able to right click the download link and save it as an SVG using your browser's context menu. In Safari and Firefox, it's called "Save Page As", and in Chrome it's just "Save As". You'll probably then want to use a tool like Adobe Illustrator to convert the SVG to a jpeg or png.
Alternately, you can use the demo app that @nixterrimus wrote, which allows you to download the in png format directly using Chrome or FF.
I'd like to know how to include a pattern created on the example website. When I click "Download current background" it give me a link with
data:image/svg+xml;base64,as the beginning of the url. How would I include this as a background for an element?Here's the exact one I want to use: