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