Set Image as Background for Text with CSS

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.

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://usefulangle.s3.amazonaws.com/media-assets/372-1.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.