Set Image as Background for Text with CSS

css
Published on February 21, 2021

Sometimes we need an image to be applied as background only behind the text, rather than as the full background of the container. This can be by using the background-clip: text CSS property.

background-clip: text makes the background clipped beneath the text only.

div {
	-webkit-background-clip: text;
	background-clip: text;
	background-image: url('image.jpg');
	color: transparent;
}

Note that the color of the text should be made transparent for this to work.

Demo

The below text will use this image as the its background.

This Is A Sample Text

HTML & CSS

<div id="demo-text">This Is A Sample Text</div>
#demo-text {
	font-size: 80px;
	font-weight: 700;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-image: url('https://s3.amazonaws.com/usefulangle/news/95-5f6cc1ad5575e.jpg');
}

Browser Compatibility

All major browsers have support for background-clip: text, either directly or through a prefix.

Firefox & Edge support the background-clip: text property.

Chrome & Safari support the prefixed -webkit-background-clip: text property.

In this Tutorial
    Comments
    Loading Comments