Show Image Under Text — BackgroundClip property explored!

Recently I saw a feature in Apple website, where the transparent color(Not exactly!) is applied to the text. Being a guy who do UI developments, the website of apple is the one which strongly influenced me! In one of my previous post, I shared how we can place Transparent Text over Video using Canvas and JavaScript, which is also inspired from the apple website.

I looked into their website to know how they have done it. They achieved this effect using the CSS property background-clip. Here we use background-clip: text; property. You can find more about this property here. Note: this feature is not supported in IE11. A preview of this can find here.

Logic: You can apply the transparent image for the background property. Better wrap the text content with a parent and apply the background to that. Then apply the background-clip: text; property to that wrap. As a fallback, you can give color property too.

Try it and let me know if you guys face any issues, Happy to help

Happy Reading!

A <>er

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store