The CSS background-clip property controls which part of an element receives its background. With the text value, a background image appears inside the text glyphs, creating a visually striking heading. section 5.3.2 section 5.0
Create a text-filled image effect incrementally:
- Set a background image on the heading and use background-size: cover so the image covers the entire element. section 5.3.2
- Set -webkit-background-clip: text and background-clip: text to restrict the image to the letters. section 5.3.2
- Make the letters transparent with text-fill-color, while retaining a fallback color so the heading remains visible if the effect fails. section 5.3.2 section 5.3
Image-filled Hotels heading
An h1 can use a background image clipped to its uppercase letters: background: url("bg-img.jpg"); background-size: cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: white. The white color keeps the heading readable when the image or experimental properties are unavailable.
Listing 5.8 background-clip text code
h1 {
text-transform: uppercase;
font: 900 120px "Rubik", sans-serif;
background: url(background: url("bg-img.jpg"); #1
background-size: cover;
-webkit-background-clip: text; #2
background-clip: text; #2
-moz-text-fill-color: transparent; #3
-webkit-text-fill-color: transparent; #3
color: white; #4
}
View the complete heading declaration with background sizing, prefixed and unprefixed clipping, transparent text fill, and the fallback color. section 5.3.2
