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> The result, given a particularly high contrast background, is as follows:
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; } 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-mode. Niethe 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; } 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> 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);*/ } Conclusion?
We still need PhotoShop. Sometimes!