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;
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)
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!)
Thanks Chris
You can make the letters even bigger and wider so that at least someone gets a good sense of the image clip.
True Ami. In fact you can make the image have a transition effect too.