Text With Picture Background in Pure CSS

Image: Text With Picture Background in Pure CSS GIF

Ever wanted to put an image into a text, there are some easy ways to do this in Photoshop but what if you want this on a web page with dynamic text? Thankfully there are a few ways to go about doing this. The idea is just to overlay some text over an image and use -webkit-background-clip:text CSS effect to get the desired effect.

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen -webkit-background-clip:text CSS effect by Jintos (@Jintos) on CodePen.0

Posted by:Hima Vincent

Hima Vincent is the founder & editor in chief of CodeMyUI. She is a writer by day and a reader by night who helps web designers build awesome projects by sharing amazing code snippets for inspiration. Hobbies include designing, card games, photography and exploring the culinary arts.