0

I have a div with some text and a background image I am blending in with mix-blend-mode: darken. However the background image is bleeding outside of the text. I am using Orbitron-Black as the font but I cannot see that making a difference! Here is my code.

.big-text {
  width: 100%;
  height: 500px;
  float: left;
  margin: 80px 10% 0 10%;
  position: relative
}

.text-parallax {
  background: url('https://iam.theweb.engineer/assets/text-1.jpg') no-repeat 0 0;
  display: inline-block
}

.text-parallax-content {
  font-family: 'Orbitron-Black', sans-serif;
  font-weight: 700;
  font-size: 8.8em;
  line-height: 120%;
  overflow: hidden;
  margin-bottom: 0;
  background: #232323;
  color: #fff;
  mix-blend-mode: darken;
  -ms-mix-blend-mode: darken
}
<div id="home" class="section">
  <section class="big-text">
    <div class="container">
      <div class="text-parallax" data-stellar-background-ratio="0.86">
        <div class="text-parallax-content">Bleeding Text</div>
      </div>
    </div>
  </section>
</div>

I have made a fiddle here. FIDDLE

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Phillip Dews
  • 338
  • 6
  • 25
  • 1
    is this what you try to do ? https://jsfiddle.net/s4a8rk4f/2/ _similar to `background-clip:text;` actually_ or https://jsfiddle.net/s4a8rk4f/3/ – G-Cyrillus Oct 04 '17 at 15:23
  • Awesome, thats a lot better, however the background I would prefer it to be #232323 but that dont seem to work on the box shadow – Phillip Dews Oct 04 '17 at 15:39
  • with a bit of contrast maybe ? https://jsfiddle.net/s4a8rk4f/5/ – G-Cyrillus Oct 04 '17 at 18:18

0 Answers0