CSS text image fill

ByMisterFoxOnline

Jun 25, 2024 #-webkit-background-clip, #-webkit-text-fill-color, #CSS tutorial

Not that long ago the only way to create text such as the following would have been to create and embed an image created in something like Photoshop.

In this tutorial:

HTML
CSS
Codepen

Required knowledge:

1. HTML

<h1>Ocean Magic</h1>
<p>Image is from the codepen assets feature.</p>

2. CSS

h1 {
	text-align: center;
	text-transform: uppercase;
	font-family: "Arial Black";
	font-size: 132px;
	background: url("https://images.unsplash.com/photo-1507880572231-f85401ce76e6?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ")
		top;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
p {
	font-family: Arial, sans-serif;
}

3. Codepen

See the Pen CSS: Text with image fill by David Fox (@foxbeefly) on CodePen.

Mister Fox AKA @MisterFoxOnline is an ICT, IT and CAT Teacher who has just finished training as a Young Engineers instructor. He has a passion for technology and loves to find solutions to problems using the skills he has learned in the course of his IT career.