Perfecting the Color Blend of Container with Photo Background

HTML & CSS
1

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

1408×548 275 KB

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.

Advice?

2

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

That isn’t what I’m seeing using Firefox

738×416 157 KB

3

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

4

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(http://nettra.net/demo-sites/tpt/development/wp-content/themes/tempestcorp/img/tempest-tech-ifcf.jpg);
	background-attachment:fixed;
	background-size:cover;
	-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.

1203×511 98.2 KB

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

2 Likes
5

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.

6

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.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
section {
	background:url(http://nettra.net/demo-sites/tpt/development/wp-content/themes/tempestcorp/img/tempest-tech-ifcf.jpg) no-repeat fixed 50% 50%;
	background-size:cover;
	padding:1px;
}
.mix {
	width:300px;
	height:300px;
	margin:100px;
	position:relative;
	mix-blend-mode:multiply;
	background:red;
	color:#fff;
}
</style>
</head>

<body>
<section>
    <h1>Test</h1>
    <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>
</section>
</body>
</html>

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

7

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