The “background-clip: text” is supported in all main browsers with the Webkit prefix, it allows a background image to be clipped by a text element. In this guide we will look at examples using the background-clip property and the different values you can use. The background-clip property was introduced in Webkit in 2008.
Values for background-clip
As well as the
text value for the background clip property we can also use these values:
border-boxis the default value. This allows the background to extend all the way to the outside edge of the element’s border.
padding-boxclips the background at the outside edge of the element’s padding and does not let it extend into the border.
content-boxclipsthe background at the edge of the content box.
initalsets this property to its default value.
inheritapplies the background-clip setting of the parent to the selected element.
Code for image clip
To mask the image around the text the code you’ll need is:
background: ( ) no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent;
Demonstration of background-clip: text
The above demo is clipping the picture to the text using the background-clip CSS property
Related CSS guides
Further reading on other websites
- Show Image Under Text (with Acceptable Fallback) – Chris Coyier
- Experiments with background-clip: text – Mary Lou
Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.