January 2026

Repeat Background Text with an SVG and CSS

Posts on my site can be in one of three states: scratch, draft, and done. Different things happen with the based on the status. For example, only posts that are "done" show up in the automated list on the home page.

It's pretty easy for me to finish up a "draft" and publish the site without flipping it to "done". To help prevent that, I've added a background "DRAFT" watermark. You might have already noticed it on this page.

The text comes in from a CSS background-image with an embedded SVG. Here's the code:

CSS

body {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 50 12' xmlns='http://www.w3.org/2000/svg'%3E %3Ctext x='2' y='10' font-size='10' fill='blue' fill-opacity='0.1'%3EDRAFT%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}

I don't have the sizes dialed in here. I only see the text repeating vertically even though the repeat makes it go horizontally too. I'll fix that at some point. It does what I need for now, though.

-a

end of line

Endnotes

I'm using "blue" for the color instead of white to make the text show up well across the various color modes I have on the site.
I'll turn the text 45 degrees when I get the repeat working too.