Perfecting the Color Blend of Container with Photo Background

I’m trying to accomplish the background red container with the background photo on this site:

The RGB values I’m using are correct, but I can’t get the alpha right and the color seems more saturated in the photo than what I can accomplish. Someone mentioned the use background-blend-mode, but I am not familiar with the use of it.


Are you currently in the process of making changes on the live site?

That isn’t what I’m seeing using Firefox

Yes, I know. The photo I provided is what I’m TRYING to get: the same color. But I’m not getting it.

I think you’d need to blend the color with the image so you would need to do something like this.

#wysiwyg_widgets_widget-11 .container > div {
	background-color: red;
	background-image: url(;
	-webkit-background-blend-mode: multiply;
	-webkit-background-blend-mode: multiply;
	-ms-background-blend-mode: multiply;
	background-blend-mode: multiply;

This is what it looks like with the above code inserted.

Mind you blend modes are new to me also and support is only Firefox and Chrome at present.


Thank you, PaulOB:

So basically we’re duplicating the background image and settings and applying them to the container to make this work. Seems rather a redundant method to make that work–loading the background image twice. But that is the way it seems to be implemented.

As of today, background-blend-mode still isn’t supported in IE or the new Edge. But I’ll use this and then look into finding a jQuery method, if required.

You won’t load the image twice :smile: It’s loaded once and then available in cache for as many elements as you like.

It looks mix-blend mode will blend with a parents background but it also affects the text.

<meta charset="utf-8">
<title>Untitled Document</title>
html, body {
section {
	background:url( no-repeat fixed 50% 50%;
.mix {

    <div class="mix"><p>This is a test This is a test This is a test This is a test This is a test</p> </div>

I haven’t really played with this enough yet to work out all the intricacies.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.