body {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30.000000pt' height='30.000000pt' viewBox='0 0 300.000000 300.000000' preserveAspectRatio='xMidYMid meet'><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='#3F0607' stroke='none'><path class='node' id='node1' d='M1255 2979 c-214 -37 -373 -98 -560 -212 -105 -64 -246 -187 -333 -291 -457 -540 -483 -1307 -65 -1871 453 -611 1297 -784 1958 -402 156 91 335 250 448 399 31 42 57 80 57 84 0 4 6 15 14 23 30 34 105 191 140 293 124 359 113 724 -31 1078 -155 380 -487 695 -874 831 -246 86 -514 110 -754 68z m464 -544 c153 -37 268 -120 323 -233 31 -62 33 -73 33 -172 0 -82 -4 -115 -19 -150 -49 -111 -167 -242 -326 -359 -179 -132 -213 -178 -227 -302 l-8 -74 -55 0 -55 0 2 107 c3 151 25 219 118 363 114 178 161 315 151 445 -9 133 -48 204 -134 246 -47 24 -61 26 -135 22 -63 -3 -92 -10 -119 -26 -55 -34 -53 -51 12 -120 68 -72 85 -113 77 -190 -11 -108 -86 -165 -215 -164 -64 1 -82 5 -121 29 -134 83 -137 294 -8 427 84 85 184 138 312 162 88 17 306 11 394 -11z m-160 -1453 c25 -15 61 -49 80 -76 33 -46 36 -55 36 -125 0 -66 -4 -82 -27 -117 -108 -167 -308 -166 -417 1 -22 34 -26 51 -26 115 1 79 11 104 64 163 72 79 197 96 290 39z'></path></g><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='#FFFFFF' stroke='none'><path class='node' id='node4' d='M1325 2446 c-128 -24 -228 -77 -312 -162 -129 -133 -126 -344 8 -427 39 -24 57 -28 121 -29 129 -1 204 56 215 164 8 77 -9 118 -77 190 -65 69 -67 86 -12 120 27 16 56 23 119 26 74 4 88 2 135 -22 86 -42 125 -113 134 -246 10 -130 -37 -267 -151 -445 -93 -144 -115 -212 -118 -363 l-2 -107 55 0 55 0 8 74 c14 124 48 170 227 302 159 117 277 248 326 359 15 35 19 68 19 150 0 99 -2 110 -33 172 -55 113 -170 196 -323 233 -88 22 -306 28 -394 11z'></path><path class='node' id='node7' d='M1385 1011 c-67 -17 -116 -56 -160 -126 -14 -22 -19 -49 -20 -105 0 -64 4 -81 26 -115 109 -167 309 -168 417 -1 23 35 27 51 27 117 0 70 -3 79 -36 125 -61 85 -165 128 -254 105z'></path></g></svg>") 50% 50% repeat transparent;
}
Please find the inline SVG in the CSS. This doesn't show anything in the background. not getting any issue as well. Please let me know if this is the right way of creating the background ? please note I am using Firefox. Same works in Chrome.
Firefox doesn't like the # in your data URL. Replace all the hashes with %23.
body {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30.000000pt' height='30.000000pt' viewBox='0 0 300.000000 300.000000' preserveAspectRatio='xMidYMid meet'><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='%233F0607' stroke='none'><path class='node' id='node1' d='M1255 2979 c-214 -37 -373 -98 -560 -212 -105 -64 -246 -187 -333 -291 -457 -540 -483 -1307 -65 -1871 453 -611 1297 -784 1958 -402 156 91 335 250 448 399 31 42 57 80 57 84 0 4 6 15 14 23 30 34 105 191 140 293 124 359 113 724 -31 1078 -155 380 -487 695 -874 831 -246 86 -514 110 -754 68z m464 -544 c153 -37 268 -120 323 -233 31 -62 33 -73 33 -172 0 -82 -4 -115 -19 -150 -49 -111 -167 -242 -326 -359 -179 -132 -213 -178 -227 -302 l-8 -74 -55 0 -55 0 2 107 c3 151 25 219 118 363 114 178 161 315 151 445 -9 133 -48 204 -134 246 -47 24 -61 26 -135 22 -63 -3 -92 -10 -119 -26 -55 -34 -53 -51 12 -120 68 -72 85 -113 77 -190 -11 -108 -86 -165 -215 -164 -64 1 -82 5 -121 29 -134 83 -137 294 -8 427 84 85 184 138 312 162 88 17 306 11 394 -11z m-160 -1453 c25 -15 61 -49 80 -76 33 -46 36 -55 36 -125 0 -66 -4 -82 -27 -117 -108 -167 -308 -166 -417 1 -22 34 -26 51 -26 115 1 79 11 104 64 163 72 79 197 96 290 39z'></path></g><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='%23FFFFFF' stroke='none'><path class='node' id='node4' d='M1325 2446 c-128 -24 -228 -77 -312 -162 -129 -133 -126 -344 8 -427 39 -24 57 -28 121 -29 129 -1 204 56 215 164 8 77 -9 118 -77 190 -65 69 -67 86 -12 120 27 16 56 23 119 26 74 4 88 2 135 -22 86 -42 125 -113 134 -246 10 -130 -37 -267 -151 -445 -93 -144 -115 -212 -118 -363 l-2 -107 55 0 55 0 8 74 c14 124 48 170 227 302 159 117 277 248 326 359 15 35 19 68 19 150 0 99 -2 110 -33 172 -55 113 -170 196 -323 233 -88 22 -306 28 -394 11z'></path><path class='node' id='node7' d='M1385 1011 c-67 -17 -116 -56 -160 -126 -14 -22 -19 -49 -20 -105 0 -64 4 -81 26 -115 109 -167 309 -168 417 -1 23 35 27 51 27 117 0 70 -3 79 -36 125 -61 85 -165 128 -254 105z'></path></g></svg>") 50% 50% repeat transparent;
}
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/
