SVG data image not working as a background-image in a pseudo element

by

The # character in a URL is reserved to indicate the start of a fragment identifier.

You must URL encode the data URL contents, which means converting any hash characters in the data URL to %23

More Related Contents:

  1. img src SVG changing the styles with CSS
  2. SVG Fill not being applied in FireFox
  3. Firefox blurs an image when scaled through external CSS or inline style.
  4. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
  5. Browser can’t access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
  6. Fill SVG path element with a background-image
  7. Transparent arrow/triangle indented over an image
  8. How to change the color of an svg element?
  9. CSS Image size, how to fill, but not stretch?
  10. How can I make an svg scale with its parent container?
  11. How can I resize an image dynamically with CSS as the browser width/height changes?
  12. CSS :before on inline SVG
  13. Content url does not display image on firefox browser
  14. Drop shadow for PNG image in CSS
  15. Triangle shape with background image
  16. 3D CSS transform, jagged edges in Firefox
  17. firefox overflow-y not working with nested flexbox
  18. How to put an image in div with CSS?
  19. Responsive Images with CSS
  20. Faster way to develop and test print stylesheets (avoid print preview every time)?
  21. Add ellipses to overflowing text in SVG?
  22. What is the correct “-moz-appearance” value to hide dropdown arrow of a element
  23. 3d transforms on SVG element
  24. Hide Up & Down Arrow Buttons (Spinner) in Input Number – Firefox 29
  25. Define an ‘s src attribute in CSS [duplicate]
  26. How do you style a external svg with css
  27. vertical-align image in div [duplicate]
  28. How to use images in css with Webpack
  29. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  30. Double curved shape

Leave a Comment