Is there a way to use use text as the background with CSS?

by

SVG text background image

body {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version='1.1' height="50px" width="120px"><text x='0' y='15' fill="red" font-size="20">I love SVG!</text></svg>");
}
<p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p>
<p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p>

Here is an indented version of the CSS so you can understand better. Note that this does not work, you need to use the single liner SVG from the snippet above instead:

body {
  background-image:url("data:image/svg+xml;utf8,
  <svg xmlns="http://www.w3.org/2000/svg" version='1.1'
       height="50px" width="120px">
    <text x='0' y='15' fill="red" font-size="20">I love SVG!</text>
  </svg>");
}

Not sure how portable this is (works on Firefox 31 and Chrome 36), and it is technically an image… but the source is inline and plain text, and it scales infinitely.

@senectus found that it works better on IE if you base64 encode it: https://stackoverflow.com/a/25593531/895245

More Related Contents:

  1. Can I set an opacity only to the background image of a div?
  2. Why does styling the background of the body element affect the entire screen?
  3. Is it possible to have two background colors for a single html element? [duplicate]
  4. Why the content is not covered by the background of an overlapping element?
  5. Fixed background image with ios7
  6. Color of stacked semi-transparent boxes depends on order?
  7. Stretch background image css?
  8. CSS Background image not loading
  9. Fit website background image to screen size
  10. How to create a Slanted Background with CSS? [duplicate]
  11. How to change the inner white color of Font Awesome’s exclamation triangle icon?
  12. How to center a (background) image within a div?
  13. Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3
  14. Fallback background-image if default doesn’t exist
  15. How to add a background image on top of a previous background image?
  16. Cut Corners using CSS
  17. What to use in place of ::ng-deep
  18. How to center elements on the last row in CSS Grid?
  19. Using margin:auto to vertically-align a div
  20. Position: absolute and parent height?
  21. Responsive CSS Trapezoid Shape
  22. How can I set the max-width of a table cell using percentages?
  23. make div’s height expand with its content
  24. CSS Background Opacity [duplicate]
  25. Flex items not respecting margins and box-sizing: border-box
  26. Rounded corners in outlook without images
  27. body { overflow-x: hidden; } breaks position: sticky
  28. Border around specific rows in a table?
  29. Making a div that covers the entire page
  30. How to calc() the number of rows in a grid template?

Leave a Comment