<div class="container">
    <div class="pic"></div>
    <div class="text">IMAGE</div>
</div>
$img: "https://picsum.photos/1000/1000?random=5";
body {
    // background: linear-gradient(#333, #ddd) no-repeat;
}

.container {
    position: relative;
    width: 500px;
    height: 300px;
    margin: auto;
}

.pic {
    position: relative;
    width: 100%;
    height: 100%;
    background: url($img);
    background-repeat: no-repeat;
    background-size: cover;
}

.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size:140px;
    line-height:320px;
    width:100%;
    height:100%;
    font-weight:bold;
    text-align:center;
    color: #000;
    mix-blend-mode: lighten;
    z-index: 99;
    background-color: #fff;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.