How to Repeat Text as a Background Image in CSS Using element()

Recently, one design trend has been very popular: displaying text repeatedly. For example, the GoCompare website uses this design in its large multi-channel advertising campaigns. Nike also uses this design technique in his advertising.

I've been thinking about how to achieve this design effect on a web page. We can repeat text directly in the markup, or export the design as an image using tools like Photoshop, but putting the text in the image is not conducive to SEO and accessibility. Even with actual text, we don't want the screen reader to read it aloud.

versatile versatile versatile versatile

OK, stop!

These factors seem to make this kind of web design difficult to achieve. I then found myself eager to use long-standing but poorly supported element() features in CSS. It allows to use any HTML element as a background image, whether it is a single button element or a complete content<div> . According to the specification:<blockquote><p> <code>element() function only reproduces the appearance of the referenced element, not the actual content and its structure. The author should use it for decorative purposes only.

For our purposes, we will reference text elements for a duplicate effect.

Let's define an ID that can be applied to the text element we want to repeat. We name it #thingy . Note that when we use #thingy , we must add -moz- prefix before element() value. While Firefox has supported element() since 2010, unfortunately, no other browsers have supported it since then.

 .element {
  background-image: -moz-element(#thingy);
}

This is a relatively loose reappearance of the Nike ads we've seen before. Again, Firefox is required to view the demo as expected.

Have you seen how it works in concept? I placed an element ( #versatility ) on the page, hiding it by setting its height to zero, setting it as the background image of the body, and then using background-repeat property to repeat it vertically below the page.

element() background is dynamic . This means that if the referenced HTML element changes, the background image appearance of the element using it also changes. This is similar to using a custom property: change the variable and it updates in all places where it is used.

Of course, there are other use cases for this property. See how Preethi uses it to create in-page scrolling navigation for articles. If you want to be more advanced, you can also use HTML canvas elements as background. One way I use it is to display a screenshot of the page in the directory. Vincent De Oliveira documented some very creative examples. This is an image reflection effect if you like retro web design:

Very cool, right? Again, I wish I could say this is a way to get this simple design effect that can be put into production, but that's the case. Actually, this is a great reminder to make your voice for what you want to implement in your browser. In WebKit and Chromium, you can submit public tickets. Hopefully we will eventually get this feature in Safari and Chrome.