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

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

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

Diggin’ that orange! (Source)

I couldn’t assist however marvel how I might 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 photographs is unhealthy for each website positioning and accessibility. Then there’s the truth that, even when we did use precise textual content, it’s not like we’d need a display 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, element() function in CSS. It allows using any HTML aspect as a background picture, whether or not it’s a single button aspect, or a whole <div> filled with content material.

Based on 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 need to repeat. Let’s name it #thingy. Be aware that once we use #thingy, we’ve bought 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.

.aspect {
  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 supposed.

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 reside. Meaning the background-image look on the factor utilizing it is going to 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 every single place it’s used.

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

Fairly neat, proper? Once more, I want I might say this can be a production-ready strategy to get that neat design impact, however issues are what they’re in the meanwhile. Truly, that’s an excellent 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.

Source link

Leave a Reply

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