Set Image as Background for Text with CSS

css
Published on February 21, 2021

An image can be set as the background for a text by using the background-clip: text CSS property.

This property will make the background extend 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.

Related Tutorials
Crop Images in CSS with object-fit and object-position
Comments
Loading Comments