DEV Community

Japheth Ezekiel
Japheth Ezekiel

Posted on

Creating a "fill text with image" effect using HTML and CSS.

Alt Text

Adding text on images can make your website look amazing. It is great for gaining the attention of readers. This is a popular technique and a classic effect in Adobe Photoshop/Illustrator, thanks to the power of clipping masks. It clips the image to the text, meaning that only the area of the image that sits directly above the actual text remains visible, creating the illusion that the image is inside the text. The rest of the image is now hidden from view which create a solid Fill layer. This same effect can be make using CSS. And here's how I created it.
First, I created an index.html file, markup have a h1 tag with an ID "title".
Secondly, I created a style.css file which I linked it to my index.html. The CSS has tags, classes and id's from my index.html giving them some basic properties.
Since the ID title is where my h1 is, I add a background-clip properties to it.
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.




background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;



Enter fullscreen mode Exit fullscreen mode

If the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image).

codepen: https://codepen.io/iamdejean/pen/wvwjjer
github: https://github.com/iamdejean/Fill-text-with-image-using-CSS

Top comments (4)

Collapse
 
chrisachard profile image
Chris Achard

oh, neat! I didn't know you could do that in straight CSS. Thanks for the tip!

(side note: it always amazes me what you can do in raw CSS... I need to learn more of these things!)

Collapse
 
iamdejean profile image
Japheth Ezekiel

Thanks Chris

Collapse
 
amiamigo profile image
Ami Amigo

You can make the letters even bigger and wider so that at least someone gets a good sense of the image clip.

Collapse
 
iamdejean profile image
Japheth Ezekiel

True Ami. In fact you can make the image have a transition effect too.