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.
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.
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).
