SVG as Data URI for background image

by Ali Uygur

HTML

<h1>SVG at a data URI for background images....</h1>
<p>just because you can, doesn't mean you should.<p>

CSS

body { background-image: 
        url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhYiIgZGF0YS1pY29uPSJnb29nbGUtcGxheSIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWdvb2dsZS1wbGF5IGZhLXctMTYiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMzI1LjMgMjM0LjNMMTA0LjYgMTNsMjgwLjggMTYxLjItNjAuMSA2MC4xek00NyAwQzM0IDYuOCAyNS4zIDE5LjIgMjUuMyAzNS4zdjQ0MS4zYzAgMTYuMSA4LjcgMjguNSAyMS43IDM1LjNsMjU2LjYtMjU2TDQ3IDB6bTQyNS4yIDIyNS42bC01OC45LTM0LjEtNjUuNyA2NC41IDY1LjcgNjQuNSA2MC4xLTM0LjFjMTgtMTQuMyAxOC00Ni41LTEuMi02MC44ek0xMDQuNiA0OTlsMjgwLjgtMTYxLjItNjAuMS02MC4xTDEwNC42IDQ5OXoiPjwvcGF0aD48L3N2Zz4=");
      

    color: white; text-shadow: 2px 2px rgba(0,0,0,0.4);}
h1 {font-size: 20px;}