Can anyone help me to make a duotone CSS effect?

[DMB]

Hi there,

I'm trying to make a CSS duotone just like this: https://codepen.io/james_gillen/pen/JGoKxO
(PS ignore the text, its just the image i am interested in)

So far i have a full screen row (browser height sets row height), which i have assigned the HTML class 'test' and then this CSS:

.test { background-image: url(blahblah.jpg);
background-color:red;
background-blend-mode: screen;}

That succesfully screens a red color over my image. So far so good.

But I want to have a two color duotone image like the Codepen above... Not sure if its really possible with Laytheme as I think it requires two Divs stacked on top of each other - is that correct? I'm not bad at CSS but not a pro, and i'm having diffuculty getting my head around how the code works in the Codepen...

If anyone can help that would be great.

Thanks,

Duncan