Eriks Eriks - 1 month ago 8
CSS Question

svg+xml base64 url encoded firefox issues with content: url();

This solution was working on Chrome, but no longer on FF and IE.

I have changed svg to base64 and url encoded as I have read on other topics.

In

img
tag the svg works fine, but when I use it in
content: url();
it doesn't work.

Here is the fiddle

#someDiv {
content:url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOTIuNiAzOTIuNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMwMDI0N2Q7fS5jbHMtMntmaWxsOiNmZmY7fS5jbHMtM3tmaWxsOiNjZjE0MmI7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT51azJfZmxhZzwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNLTI5LjcsOTguN2MwLDEwOC4zLDg4LDE5Ni41LDE5Ni4zLDE5Ni41UzM2Mi45LDIwNy4xLDM2Mi45LDk4LjdjMC0xMDQuNC04MS44LTE5MC0xODQuNS0xOTYuMUgxNTVDNTIuMS05MS4zLTI5LjctNS43LTI5LjcsOTguN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0tMTEuNiwxNi4zTDExOS44LDk3LjF2LTc0TDIzLjgtMzZBMTk5LjI3LDE5OS4yNywwLDAsMC0xMS42LDE2LjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNLTYuOSw3TDExOS45LDg0LjlWNjNMMi42LTlBMTgyLjEyLDE4Mi4xMiwwLDAsMC02LjksN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0tNywxOTAuM2ExOTksMTk5LDAsMCwwLDM4LjIsNTAuNWw4OC43LTU0LjV2LTc0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTIzLjcsMjMzLjJsOTYuMi01OS4xVjE1Mi4zTDExLjQsMjE4LjlDMTUuMywyMjMuOSwxOS40LDIyOC42LDIzLjcsMjMzLjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzExLjItMzMuOWwtOTIuOCw1N3Y3NEwzNDUuOCwxOC44QTE5NCwxOTQsMCwwLDAsMzExLjItMzMuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0zMTguMS0yNkwyMTguNCwzNS4yVjU3TDMyOS4zLTExQTE4Mi42NSwxODIuNjUsMCwwLDAsMzE4LjEtMjZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzQxLjQsMTg3LjlMMjE4LjUsMTEyLjN2NzRMMzA0LDIzOC44QTE5Ni4zNSwxOTYuMzUsMCwwLDAsMzQxLjQsMTg3LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzM2LjQsMTk3bC0xMTgtNzIuNHYyMS44bDEwNy45LDY2LjNDMzI5LjksMjA3LjYsMzMzLjMsMjAyLjQsMzM2LjQsMTk3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTS0yOS43LDk4LjdBMTk3Ljc2LDE5Ny43NiwwLDAsMC0yMi45LDE1MGwzNzguOCwwLjJhMTk1LjM5LDE5NS4zOSwwLDAsMCwyLjktOTAuOGwtMzg0LjUtLjJBMTk2LjcxLDE5Ni43MSwwLDAsMC0yOS43LDk4LjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTU0LjgtOTcuNGExOTAuNjYsMTkwLjY2LDAsMCwwLTM4LjcsNi4zVjI4OC42YTE5NS4xMiwxOTUuMTIsMCwwLDAsNTAuNCw2LjYsMTk2Ljc0LDE5Ni43NCwwLDAsMCw1NS4xLTcuOXYtMzc3YTE5NC4zOCwxOTQuMzgsMCwwLDAtNDMuMy03LjZIMTU0Ljh2LTAuMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xMzYuMywyOTIuOGEyMDIsMjAyLDAsMCwwLDMwLjMsMi4zLDE5My44NiwxOTMuODYsMCwwLDAsMzMuNC0yLjlWLTk0LjlhMTkyLjg5LDE5Mi44OSwwLDAsMC0yMS42LTIuNUgxNTVhMTgzLjY2LDE4My42NiwwLDAsMC0xOC41LDJWMjkyLjhoLTAuMloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0tMjkuNyw5OC43QTIwMy4zMiwyMDMuMzIsMCwwLDAtMjcsMTMxLjFIMzYwLjFhMTkyLjMyLDE5Mi4zMiwwLDAsMCwyLjctMzIuNCwyMDUuNDIsMjA1LjQyLDAsMCwwLTEuMy0yMi4zSC0yOC40QTIwMy45NCwyMDMuOTQsMCwwLDAtMjkuNyw5OC43WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjwvc3ZnPg==');
display: block;
width: 259px;
height: 243px;
}

Answer Source

In the CSS 2 Specification content only applies to the :before and :after pseudo-elements. Firefox does implement this

#someDiv::before {
content:url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOTIuNiAzOTIuNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMwMDI0N2Q7fS5jbHMtMntmaWxsOiNmZmY7fS5jbHMtM3tmaWxsOiNjZjE0MmI7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT51azJfZmxhZzwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNLTI5LjcsOTguN2MwLDEwOC4zLDg4LDE5Ni41LDE5Ni4zLDE5Ni41UzM2Mi45LDIwNy4xLDM2Mi45LDk4LjdjMC0xMDQuNC04MS44LTE5MC0xODQuNS0xOTYuMUgxNTVDNTIuMS05MS4zLTI5LjctNS43LTI5LjcsOTguN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0tMTEuNiwxNi4zTDExOS44LDk3LjF2LTc0TDIzLjgtMzZBMTk5LjI3LDE5OS4yNywwLDAsMC0xMS42LDE2LjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNLTYuOSw3TDExOS45LDg0LjlWNjNMMi42LTlBMTgyLjEyLDE4Mi4xMiwwLDAsMC02LjksN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0tNywxOTAuM2ExOTksMTk5LDAsMCwwLDM4LjIsNTAuNWw4OC43LTU0LjV2LTc0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTIzLjcsMjMzLjJsOTYuMi01OS4xVjE1Mi4zTDExLjQsMjE4LjlDMTUuMywyMjMuOSwxOS40LDIyOC42LDIzLjcsMjMzLjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzExLjItMzMuOWwtOTIuOCw1N3Y3NEwzNDUuOCwxOC44QTE5NCwxOTQsMCwwLDAsMzExLjItMzMuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0zMTguMS0yNkwyMTguNCwzNS4yVjU3TDMyOS4zLTExQTE4Mi42NSwxODIuNjUsMCwwLDAsMzE4LjEtMjZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzQxLjQsMTg3LjlMMjE4LjUsMTEyLjN2NzRMMzA0LDIzOC44QTE5Ni4zNSwxOTYuMzUsMCwwLDAsMzQxLjQsMTg3LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzM2LjQsMTk3bC0xMTgtNzIuNHYyMS44bDEwNy45LDY2LjNDMzI5LjksMjA3LjYsMzMzLjMsMjAyLjQsMzM2LjQsMTk3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTS0yOS43LDk4LjdBMTk3Ljc2LDE5Ny43NiwwLDAsMC0yMi45LDE1MGwzNzguOCwwLjJhMTk1LjM5LDE5NS4zOSwwLDAsMCwyLjktOTAuOGwtMzg0LjUtLjJBMTk2LjcxLDE5Ni43MSwwLDAsMC0yOS43LDk4LjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOS43IDk3LjQpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTU0LjgtOTcuNGExOTAuNjYsMTkwLjY2LDAsMCwwLTM4LjcsNi4zVjI4OC42YTE5NS4xMiwxOTUuMTIsMCwwLDAsNTAuNCw2LjYsMTk2Ljc0LDE5Ni43NCwwLDAsMCw1NS4xLTcuOXYtMzc3YTE5NC4zOCwxOTQuMzgsMCwwLDAtNDMuMy03LjZIMTU0Ljh2LTAuMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xMzYuMywyOTIuOGEyMDIsMjAyLDAsMCwwLDMwLjMsMi4zLDE5My44NiwxOTMuODYsMCwwLDAsMzMuNC0yLjlWLTk0LjlhMTkyLjg5LDE5Mi44OSwwLDAsMC0yMS42LTIuNUgxNTVhMTgzLjY2LDE4My42NiwwLDAsMC0xOC41LDJWMjkyLjhoLTAuMloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjcgOTcuNCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0tMjkuNyw5OC43QTIwMy4zMiwyMDMuMzIsMCwwLDAtMjcsMTMxLjFIMzYwLjFhMTkyLjMyLDE5Mi4zMiwwLDAsMCwyLjctMzIuNCwyMDUuNDIsMjA1LjQyLDAsMCwwLTEuMy0yMi4zSC0yOC40QTIwMy45NCwyMDMuOTQsMCwwLDAtMjkuNyw5OC43WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuNyA5Ny40KSIvPjwvc3ZnPg==');
    display: block;
    width: 259px;
    height: 243px;
<div id="someDiv"></div>

The CSS 3 Generated Content Module Level 3 extends this to apply directly to elements but that specification is still a working draft. The introduction contains the text

This is a very rough draft, and is not ready for implementation.

So it's not surprising that browser implementation is spotty.