Sometimes default text just won’t cut it. If you are designing a site or landing page that needs high impact imagery inside of your text to really illustrate a point, this tutorial is for you! With only a few lines of CSS, we are going to transform a paragraph of text into the below masterpiece.
Demo of this tutorial can be found here.
![](https://i0.wp.com/www.frontendhero.dev/wp-content/uploads/2020/03/Mask-text-with-an-image-in-CSS-e1585586764550.png?resize=2145%2C950&ssl=1)
Add our paragraph of text
I have created a .bg class to use when I want to add this effect to paragraphs. You can change this for lots of different tags such as headings is you prefer.
- index.htm
<p class="bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor magna</p>
Find a suitable image
I used pexels to find the royalty free image in my example. Once you have found an image for your example, rename it to bg.jpg.
![](https://i0.wp.com/www.frontendhero.dev/wp-content/uploads/2020/03/bg.jpeg?resize=1024%2C713&ssl=1)
Now, let’s add some CSS
Now, we just have to make the font bigger and bolder and add out recently downloaded image to be used inside of our paragraph.
- style.css
p.bg {
font-size: 66px;
line-height: 80px;
font-weight: 800;
text-transform: uppercase;
background: url(bg.jpeg) 0 0 / cover no-repeat;
color: #de466c;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
What are we doing to our paragraph
- font-size: 66px; Make our text size way bigger.
- line-height: 80px; Increase the line-height also.
- font-weight: 800; Make the weight of the text as bold as it will go.
- text-transform: uppercase; Convert the text to uppercase.
- background: url(bg.jpeg) 0 0 / cover no-repeat; Make the image a background image of the text and make the size as large as possible.
- color: #de466c; Add a fallback color if the browser doesn’t support the next two lines.
- -webkit-background-clip: text; Mask our image to the text.
- -webkit-text-fill-color: transparent; Used with the previous rule to clip the image to the text.
And that’s about it. A ridiculously easy way to make text more interesting, although be sure to test your project in your target browsers to make sure everything displays ok (Looking at you IE).