CODEWITHSUNDEEP
cssbackground
Dejan
Dejan

Reputation: 45

Background-Blend-Mode for multiple background images

I have this code:

BACKGROUND-IMAGE: url("Background-2.png"), 
url("Background.jpg");

How to apply BACKGROUND-BLEND-MODE only on Background.jpg and not on Background-2.png?

Upvotes: 2

Views: 2294

Answers (1)

Draco18s no longer trusts SE
Draco18s no longer trusts SE

Reputation: 15941

Like this:

<div style="width:300px; height:300px; background-color:#FF0000;
    background-image:url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode:darken,lighten;">
</div>

Note the two values passed to the blend-mode style. The first one affects the first background, the second affects the second.

https://jsfiddle.net/x7pjae50/

Based off the syntax I found here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

If you want one to not have a blend mode, that is "blend mode normal."

Upvotes: 3

Related Questions