Blending Text With Background Images in CSS

- 1 minute read

Consider the following code, in which a header is placed on top of a background image:

<body>
    <!-- [BACKGROUND IMAGE] -->
    <h1>This is some text.</h1>
</body>

It might be styled something like this:

body {
    background-image: url(https://picsum.photos/200);
    height: 100%;
    width: 100%;
}
h1 {
    color: brown;
    font-size: 72px;
    text-align: center;
}

But often times, this can lead to contrast issues.

Solid header colors don’t necessarily blend well with busy background images (and gradients).

That’s where the mix-blend-mode property can come in:

h1 {
    mix-blend-mode: overlay;
}

This will blend your text nicely with the background it sits upon.

Link to this section Blending background images with text

The reverse is also possible with the background-blend-mode property.

This will blend your background image with the color of your text, but it can look a bit strange with some backgrounds:

body {
    background-blend-mode: overlay;
}

Link to this section Conclusion

Anyway, I find this little-known property very useful, especially when displaying text on top of a large hero image.