The way to Repeat Textual content as a Background Picture in CSS Utilizing aspect()

There’s a design development I’ve seen popping up all over. Perhaps you’ve seen it too. It’s this kind of factor the place textual content is repeated time and again. A very good instance is the value comparability web site, GoCompare, who used it in a serious multi-channel promoting marketing campaign.

Nike has used it as properly, like on this commercial:

Diggin’ that orange! (Supply)

I couldn’t assist however surprise how I’d implement this kind of design for the online. I imply, we might clearly simply repeat the textual content in markup. We might additionally export the design as a picture utilizing one thing like Photoshop, however placing textual content in pictures is unhealthy for each search engine optimisation and accessibility. Then there’s the truth that, even when we did use precise textual content, it’s not like we’d desire a display screen reader converse it out.


OK, cease already!

These concerns make it appear unrealistic to do one thing like this on the net. Then I discovered myself pining for the long-existing, but badly supported, aspect() function in CSS. It permits using any HTML aspect as a background picture, whether or not it’s a single button aspect, or a complete

filled with content material.

In accordance with the spec:

The aspect() operate solely reproduces the looks of the referenced aspect, not the precise content material and its construction. Authors ought to solely use this for ornamental functions.

For our functions, we’d be referencing a textual content aspect to get that repeating impact.

Let’s outline an ID we are able to apply to the textual content aspect we wish to repeat. Let’s name it #thingy. Be aware that after we use #thingy, we’ve received to prefix the aspect() worth with -moz-. Whereas aspect() has been supported in Firefox since 2010, it sadly hasn’t landed in every other browser since.

  background-image: -moz-element(#thingy);

Right here’s a considerably unfastened recreation of the Nike commercial we noticed earlier. Once more, Firefox is required to see the demo as meant.

CodePen Embed Fallback

See how that works conceptually? I positioned a component (#versatility) on the web page, hid it by giving it zero top, set it because the background-image on the physique, then used the background-repeat property to duplicate it vertically down the web page.

The aspect() background is stay. Which means the background-image look on the factor utilizing it can change if the referenced HTML aspect adjustments. It’s the identical kind of deal when working with customized properties: change the variable and it updates in all places it’s used.

There are, after all, different use instances for this property. Try how Preethi used it to make in-page scrolling navigation for an article. You may additionally use a HTML canvas aspect as a background if you wish to get fancy. A method I’ve used it’s to indicate screenshots of pages in a desk of contents. Vincent De Oliveira, has documented some wildly artistic examples. This is an image-reflection impact, if you happen to’re into retro net design:

CodePen Embed Fallback

Fairly neat, proper? Once more, I want I might say it is a production-ready method to get that neat design impact, however issues are what they’re in the mean time. Really, that’s reminder to make your voice heard for options you’d prefer to see carried out in browsers. There are open tickets in WebKit and Chromium the place you are able to do that. Hopefully we’ll ultimately get this function in Safari-world and Chrome-world browsers.

Leave a Reply