Home Web Front-end CSS Tutorial How to Repeat Text as a Background Image in CSS Using element()

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

Apr 08, 2025 am 11:06 AM

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);
}
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

It&#039;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.

Building an Ethereum app using Redwood.js and Fauna Building an Ethereum app using Redwood.js and Fauna Mar 28, 2025 am 09:18 AM

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

Can you get valid CSS property values from the browser? Can you get valid CSS property values from the browser? Apr 02, 2025 pm 06:17 PM

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&#039;s like this.

Stacked Cards with Sticky Positioning and a Dash of Sass Stacked Cards with Sticky Positioning and a Dash of Sass Apr 03, 2025 am 10:30 AM

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.

A bit on ci/cd A bit on ci/cd Apr 02, 2025 pm 06:21 PM

I&#039;d say "website" fits better than "mobile app" but I like this framing from Max Lynch:

Using Markdown and Localization in the WordPress Block Editor Using Markdown and Localization in the WordPress Block Editor Apr 02, 2025 am 04:27 AM

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

Comparing Browsers for Responsive Design Comparing Browsers for Responsive Design Apr 02, 2025 pm 06:25 PM

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

Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'? Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'? Apr 05, 2025 pm 05:51 PM

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...

See all articles