How can I fill a text with an image in HTML? [duplicate] - html

Question

This question already has answers here:
Transparent text cut out of background
(14 answers)
Cut-out text with CSS
(3 answers)
How to apply inverse text mask with CSS
(4 answers)
Cut out text in CSS. Possible? [duplicate]
(1 answer)
transparent text but opaque background in css [duplicate]
(1 answer)
Closed 3 years ago.
Let's say I have an image like this:
and I want to fill an <h1> tag with that image to look something like this:
I guess I could do something like this to start...
div {
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
background-size: cover;
}
h1 {
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<div>
<h1>404</h1>
</div>
Should I have another 'absolute' div white covering the image and a transparent font over? Does anyone know how to accomplish this?

Answer 1

background-clip might be an option
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
div {
width: 100%;
height: 100%;
}
h1 {
color: transparent;
font-size: 28vmax;
background-size: cover;
background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
background-clip: text;
}
<div>
<h1>404</h1>
</div>
or mix-blend-mode:
https://css-tricks.com/almanac/properties/m/mix-blend-mode/
The mix-blend-mode property defines how an element’s content should blend with its background. This means that any images or text, borders or headings will be influenced by this property.
also
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
* {
margin: 0;
}
div {
width: 100%;
height: 100vh;
background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
background-size: cover;
}
h1 {
font-size: 15vmax;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
color: black;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
background: white;
mix-blend-mode: screen;
}
<div>
<h1>404</h1>
</div>

Answer 2

You can try using -webkit-background-clip: text;
This is called Knockout Text but you should be able to get the outcome you want with it.
Here are a few examples, but it might be easier to do it in photoshop and then insert the image. (Just an alternative)
/*
Based from this article from Divya Manian -
http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
*/
* {
margin: 0;
padding: 0;
}
*,
:before,
:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
min-height: 100%;
}
body {
font-family: 'Oswald', sans-serif;
color: #fff;
background-color: #000;
}
.wrapper {
text-align: center;
}
.title {
font-size: 2em;
position: relative;
margin: 0 auto 1em;
padding: 1em 1em .25em 1em;
text-align: center;
text-transform: uppercase;
}
.title:after {
position: absolute;
top: 100%;
left: 50%;
width: 240px;
height: 4px;
margin-left: -120px;
content: '';
background-color: #fff;
}
/* Clip text element */
.clip-text {
font-size: 6em;
font-weight: bold;
line-height: 1;
position: relative;
display: inline-block;
margin: .25em;
padding: .5em .75em;
text-align: center;
/* Color fallback */
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.clip-text:before,
.clip-text:after {
position: absolute;
content: '';
}
/* Background */
.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
}
/* Text Background (black zone) */
.clip-text:after {
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: #000;
}
/* Change the background position to display letter when the black zone isn't here */
.clip-text--no-textzone:before {
background-position: -.75em 0;
}
.clip-text--no-textzone:after {
content: none;
}
/* Use Background-size cover for photo background and no-repeat background */
.clip-text--cover,
.clip-text--cover:before {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
}
/* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */
.clip-text_one {
background-image: url(https://picsum.photos/480/200?random);
}
.clip-text_two {
background-image: url(https://picsum.photos/480/200?grayscale);
}
.clip-text_tree {
background-image: url(https://picsum.photos/480/200?grayscale&random=2);
}
.clip-text_four {
background-image: url(https://picsum.photos/480/200?grayscale&blur=3);
}
.clip-text_five {
background-image: url(https://picsum.photos/480/200?grayscale);
}
.clip-text_six {
background-image: url(https://picsum.photos/480/200?random=3);
}
.clip-text_seven {
background-image: url(https://picsum.photos/480/200?random=4);
}
.clip-text_eight {
background-image: url(https://picsum.photos/480/200?random=6);
}
.clip-text_nine {
background-image: url(https://picsum.photos/480/200?random=5);
}
.clip-text_ten {
background-image: url(https://picsum.photos/480/200?random=7);
}
.clip-text_eleven {
background-image: url(https://picsum.photos/480/200?random=8);
background-size: cover;
}
.clip-text_twelve {
background-image: url(https://picsum.photos/480/200?random=9);
}
.clip-text_thirteen {
background-image: url(https://picsum.photos/480/200?random=10);
}
.clip-text_fourteen {
background-image: url(https://picsum.photos/480/200?random=11);
}
.clip-text_fifteen {
background-image: url(https://picsum.photos/480/200?random=12);
}
<div class="wrapper">
<p class="title">Play with background-clip text</p>
<div class="clip-text clip-text_one">TEST</div>
<div class="clip-text clip-text_fifteen clip-text--no-textzone">TEST</div>
<div class="clip-text clip-text_twelve clip-text--cover">TEST</div>
<div class="clip-text clip-text_tree clip-text--no-textzone">TEST</div>
<div class="clip-text clip-text_two">TEST</div>
<div class="clip-text clip-text_fourteen clip-text--cover">TEST</div>
<div class="clip-text clip-text_tree">TEST</div>
<div class="clip-text clip-text_eleven clip-text--cover">TEST</div>
<div class="clip-text clip-text_four">TEST</div>
<div class="clip-text clip-text_five">TEST</div>
<div class="clip-text clip-text_six">TEST</div>
<div class="clip-text clip-text_seven">TEST</div>
<div class="clip-text clip-text_eight">TEST</div>
<div class="clip-text clip-text_nine">TEST</div>
<div class="clip-text clip-text_ten">TEST</div>
<div class="clip-text clip-text_thirteen clip-text--cover">TEST</div>
</div>
Let me know if you have any questions! The implementation is fairly straight forward I made sure to include options for you to look at, here is a link for more information:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip