How to create knockout text with a non black/white background?

Question

I am trying to create knockout text like the codepen below, this codepen works just fine when the background colour is set to pure white, or pure black, but as soon you change

background: #ffff;

to, for example,

background: #f5f;

The background image leaks through for some reason, like so: How do I do this whilst using any colour, without the background image bleeding through?

Snippet Example (taken from https://codepen.io/rebelchris/pen/WNxQmpd ):

* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.background {
  background: url("https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1957&q=80")
    center;
  background-size: cover;
}
h1 {
  font-size: 15vw;
  font-weight: bold;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  mix-blend-mode: lighten;
  color: #000;
  background: #fff;
}

<div class="background">
  <h1>GALAXY</h1>
</div>

Also worth noting-- I'm not sure that [tag:twitter-bootstrap] or [tag:sass] are actually applicable here... — Alexander Nied, May 04 '22 at 13:42
Look `mix-blend-mode: lighten;` on [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode), it doesn't do what you think it does. — Amaury Hanser, May 04 '22 at 13:54

score 3 · Answer 1 · edited May 04 '22 at 13:49

I have done something similar and used the css background-clip property

the background is associated with the h1 element rather than the body

you wouldnt need the .background class in your example above

h1 {
  font-size: 15vw;
  font-weight: bold;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  background: url("https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1957&q=80") center;
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Snippet example:

* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #F5F;
}
h1 {
  font-size: 15vw;
  font-weight: bold;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  background: url("https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1957&q=80") center;
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div>
  <h1>GALAXY</h1>
</div>

Great answer-- I added a snippet to show it in action. It is worth noting that while [`background-clip`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip) appears to be standard and supported unprefixed now, [`text-fill-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color) is "non-standard," and thus should be used with caution, with good fallbacks provided. — Alexander Nied, May 04 '22 at 13:51

How to create knockout text with a non black/white background?

1 Answers1