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.
The above is the detailed content of How to Repeat Text as a Background Image in CSS Using element(). For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum

I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.

The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.

I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:

If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?

There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing

Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...
