Blog / Articles

Text Mask: How to add an image as a background in text

Ever wondered how to add an image as a background behind the letters?

CSS text mask

In this post i will explain the easy way to mask a text, by using CSS and background-clip: text;

Here is a pen created to show the final result:

See the Pen Text Clipping Mask by Lab21 (@lab21) on CodePen.

This is where the image is being placed behind the text:

.letter-mask{
   background-image: url(https://images.unsplash.com/photo-1506832424678-e8232f4a068d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2bdfe7e05ab2994e70649afa5d84022);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 200% auto;   
   -webkit-background-clip: text;
   -moz-background-clip: text;
   background-clip: text; 
   -webkit-text-fill-color: transparent;
   text-fill-color: transparent;
}

First you must set the image as a background to the div that contains the text.

Then you use the background-clip: text; declaration. What is does is clip the background “behind” the text.

Then you set the text fill color to transparent with text-fill-color: transparent; so that the background is visible.

RELATED ARTICLES
VIEW ALL ARTICLES