DEV Community

Cover image for Blending a background image into page background in CSS
Ayyash
Ayyash

Posted on • Originally published at garage.sekrab.com

Blending a background image into page background in CSS

Google it, chances are, you too ran into this situation and had trouble with blending an image into a page background image. Most of the blending examples given, blend a layer image with the local background color, or image of the layer itself, ignoring any transparency. It does not blend into the page background. Also, chances are, you ran into the repugnant solution: absolutely position a pseudo element. Today, I tried out a few methods, and am sharing with you the only ones that worked.

The code pen of the solution:

The initial HTML

Let's begin with the basic HTML to generate three different effects: blending a foreground image, blending a background color, and blending a background image.

<div class="main">
    <div class="image-blend">
      <!--Blending an image-->
        <img src="frontimage.jpg" alt="">
    </div>
    <div class="text-blend">
      <!--Blending the background color-->
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero doloremque ipsum repellendus tempore est
        eaque reiciendis rem maiores quos minima placeat modi, optio porro ipsa velit consequuntur ab
        exercitationem? Rerum.
    </div>
    <div class="bg-image-blend">
      <!--Blending the background image-->
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae beatae, consectetur rerum optio
        asperiores temporibus iste itaque voluptate corporis natus quae aliquam dicta voluptas eius sunt minus
        sit autem veniam!
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

The result, given a particularly high contrast background, is as follows:

background blend effect

Blending a foreground image

That is the easiest part, since the image is an actual element, all we have to do is add mix-blend-mode

.image-blend  img {
  /*add blend mode directly*/
  mix-blend-mode: multiply;
}
Enter fullscreen mode Exit fullscreen mode

Blend a background color

It gets harder. The initial temptation is to create a normal layer, with background color, then add backdrop-filter, or background-blend-modeNiethe works. Looks like they both deal with the layer as an isolated element, and ignore the page background. Trying SVG filters using url, also failed, it blends the layer into its own local background. So finally, the solution, like everyone states on the web, is to have a pseudo element with background color, and apply mix-blend-mode.

.text-blend {
  /*make the container relative*/
  position: relative;
}
.text-blend:before {
  /*add background to a pseudo element as absolutely positioned layer*/
  content: "";
  display: block;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /*add bg color, to reduce effect, reduce opacity*/
  background-color: rgb(125 120 17 / 39%);
  /*then simply add blend*/
  mix-blend-mode: color-burn;
}
Enter fullscreen mode Exit fullscreen mode

Blend a background image

Failing to blend a simple background color with traditional methods, means blending background images will naturally fail, so we apply the same technique of a pseudo element. But pseudo elements cannot contain an image, we instead absolutely position an HTML image element. The container contains two elements, one for text, and the other is the image. The text must be positioned higher on the z axis, not to fall under the effect of the blend.

In HTML:

<div class="bg-image-blend">
  <!--add image element-->
  <img src="frontimage.jpg" alt="">
  <!--and text wrapper-->
  <div>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae beatae, consectetur rerum optio
    asperiores temporibus iste itaque voluptate corporis natus quae aliquam dicta voluptas eius sunt minus
    sit autem veniam!
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

And in CSS:

.bg-image-blend {
  /*container relative*/
  position: relative;
}
.bg-image-blend div {
  /*text container*/
  /*make it relative to increase its zindex*/
  position: relative;
}
.bg-image-blend img {
  /* add image as absolutely positioned layer*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  /*make it cover the whole background*/
  object-fit: cover;

  /*make it blend*/
  mix-blend-mode: multiply;
  /*add extra filters for extra cool effects*/
  /*filter: sepia(1) saturate(0);*/
}
Enter fullscreen mode Exit fullscreen mode

Conclusion?

We still need PhotoShop. Sometimes!

RESOURCES

Top comments (0)