0

In all modern browsers, the background-clip: text style will cause the background to be clipped to the shape of the text in the element (MDN). Scroll the rendered result and the background-clipped text moves along with everything else on the page:

h1 {
  -webkit-background-clip: text; /* chrome, opera */
  background-clip: text;
  background-image: url(https://plus.unsplash.com/premium_photo-1669559808981-004376c78d77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80);
  color: transparent; /* let the background be visible through otherwise opaque text */
}

/* make it easier to see scrolling and clip effect */
body {
  background-image: linear-gradient(#333, #fff);
  font-size: 2.5rem;
  height: 200vh;
}
<h1>The quick brown fox</h1>
<p>Regular, un-clipped text for reference.</p>

However, if I add background-attachment: fixed, the text will stop scrolling in Firefox only:

h1 {
  background-attachment: fixed; /* <-- added */
  -webkit-background-clip: text;
  background-clip: text;
  background-image: url(https://plus.unsplash.com/premium_photo-1669559808981-004376c78d77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80);
  color: transparent;
}

body {
  background-image: linear-gradient(#333, #fff);
  font-size: 2.5rem;
  height: 200vh;
}
<h1>The quick brown fox</h1>
<p>Regular, un-clipped text for reference.</p>

Is there anything I can do to get the text to move with the scroll in Firefox? Is this a Firefox bug?

Impirator
  • 1,393
  • 1
  • 12
  • 24
  • 1
    Interesting. The MDN definition of the [`background-attachment` value](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment#values) `fixed` includes "This is not compatible with `background-clip: text`." – Tim R Aug 03 '23 at 05:24

0 Answers0