Home / Typography / Image in Text
Image in Text CSS Template, Free with Live Demo
Free text mask website template for a ski resort. A mountain scene shows through giant letters using background-clip text. Live demo. The example is Alpenglow, a ski resort.
What is image in text?
Image in text fills giant letters with a picture, so you see the scene through the word. It joins the headline and the hero image into one strong shape.
The effect is background-clip: text with transparent text color. Here the picture is a small SVG mountain scene written into the CSS, and the same background is reused for the big numbers further down.
Good for
- Travel and resort sites
- Film and event titles
- Outdoor and adventure brands
- Portfolio headers
What you get in this template
- Giant headline filled with a mountain scene
- Scene is an inline SVG, no image file
- Same image inside the fact numbers
- Wide banner using the full scene
- Works in all modern browsers
The key CSS
This is the part that makes the image in text look work. Copy it into your own project.
h1.scene {
font-family: Anton, sans-serif;
font-size: clamp(6rem, 27vw, 26rem);
background: url(mountains.svg) center / cover no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do you put an image inside text with CSS?
Give the text a background image, then set background-clip: text (plus the -webkit- version) and color: transparent. The image only shows inside the letters.
Why did my background-clip text stop working?
The background shorthand resets background-clip. Put background-clip after the shorthand, or on a more specific selector, as this template does.
Can I use a real photo?
Yes. Swap the SVG for any photo URL. Heavy, wide fonts show the most of the picture.
More Typography designs
051. Kinetic Type
Shift, a dance studio
052. Variable Fonts
Flexa, a type foundry specimen page
053. Oversized Serif
Maison Clair, a boutique hotel
054. Outline Text
Museum of Sound, an exhibition site
055. Mixed Font Pairing
Paper Lantern, an independent bookshop
057. Gradient Text
Sunset Sound, a festival lineup
058. Handwritten Accents
Nonna's Kitchen, a cooking school
059. Monospace
Byte Sized Weekly, a developer newsletter