How to use text as the background with CSS?

Spread the love

Sometimes, we wanmt to use text as the background with CSS.

In this article, we’ll look at how to use text as the background with CSS.

How to use text as the background with CSS?

To use text as the background with CSS, we set the background-image property to a base64 URL with the svg code inside.

For instance, we write

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>");
}

to set the background-image property to a URL with the svg content inside to render it as the background of the body element.

Conclusion

To use text as the background with CSS, we set the background-image property to a base64 URL with the svg code inside.

Leave a Reply

Your email address will not be published. Required fields are marked *