CSS and Background Text November 29, 2020

This isn’t anything particularly sophisticated; I just wanted to record a trick that I recently applied when redesigning my personal website.

I wanted the effect of some purely decorative background text. My constraints were:

• I didn’t want to have to use Javascript to load any text, because I want my website to display the same whether or not Javascript is enabled. I generally believe that Javascript is overused on the Web.
• I wanted to use real text, rather than an image. An image does have some benefits (no need for the browser to compute all the text layout, and it pretty much guarantees compatibility), but on the other hand, text is a much simpler format than an image, and I am of the opinion that simpler is almost always better.
• I did not want the decorative text to show up in a text-only browser, like Lynx. This is because the text is purely decorative; it does not convey any content.

This ruled out the most obvious ways to achieve this effect, including a background image or a <div> just containing raw text.

It was also difficult to load text based on the user’s screen size without Javascript. This could possibly be done with media queries, but even then I’d have to decide on an upper limit of how much text I wanted to keep ready. My initial idea was to have the entire viewport background be a wall of text, but I decided instead to set the content to a centered container whose dimensions are at most 600px.

I finally decided to add in the text in the CSS with the content property on the ::before and ::after pseudo-elements. So the page looks something like this:

<div>
  <!-- Actual content here -->
</div>
<div class="background"></div>

And we simply style it with

.background {
  z-index: -1;
}
.background::before {
  content: "This is the background text content";
}

The following two images show how it renders in Firefox and Lynx respectively:

I actually ended up putting the first character (with the fancy floral font) in its own <span> element, since there were some discrepancies between how Firefox and Chrome rendered the page when I tried styling it with the ::first-letter selector.

The ::before and ::after pseudo-elements are also quite useful for things like citations. You can throw in a prefix:

cite::before {
  content: "— ";
}

Then any citations like <cite>Book of Armaments, 2:9-21</cite> become “— Book of Armaments, 2:9-21.”