Tint a row background image with css3?

[DMB]

Hi there,

just wondering if anyone has any idea how to tint a row background image using css?

So ive got a jpeg as my row background image, and i want to overlay a semi transparent color on top to tint it, or the other way round if thats not possible - reduce the opacity of the image to reveal a color underneath.

Kind of like this except i dont the need the hover effect

https://codepen.io/jr/pen/rliKq

Thanks,

D

[arminunruh]

hey DMB, hm maybe this helps?

https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/

good luck!

[DMB]

@arminunruh Thanks for the tip - looks really cool, especially the duotone effects!

Think this is what im looking for though:
https://css-tricks.com/basics-css-blend-modes/

Only problem is the css editor in lay theme doesn't let me use the 'background-blend-mode' or 'mix-blend-mode' properties. Any idea why this is?

[arminunruh]

feel free to ignore these messages. :D

[DMB]

@arminunruh Ah ok! Will the property still work if it doesnt show up in purple?

[arminunruh]

I think yes, the editor just shows a warning

[DMB]

@arminunruh Ok cool, it doesnt seem to work... Maybe im doing something wrong?

I have a row assigned with an html class called 'aboutpic' with no image in the gridder - it seems like it should be possible in css to do this right to set a background image for the row and then the color and use css blend?

.aboutpic { background-image: url ('http://www.veilprojects.com/wp-content/uploads/2016/10/About-Portrait-Selfie-ccccc-INV-darker-2.jpg');
background-color: blue;
background-blend-mode: multiply;}

Ive followed the steps from here https://css-tricks.com/basics-css-blend-modes/ but it just doesnt seem to work...

[DMB]

@arminunruh Sorry to hassle you with questions, especially indulgent CSS ones!

2 things i'm trying to figure out to see if I can make this work:

1. Is it possible to set a 'background-image' for a blank row if I have assigned an HTML class to the row?

For example - HTML class 'test' for the row in the page editor, and then in the CSS:
.test {background-image: url 'blahblah.jpeg';}

I have tried this but cant make it work. If i use the 'background-color' property that works, so I know I am targeting the right area, i just cant seem to set a background image this way...

2. background-blend-mode doesn't work or become purple which suggests it isn't valid for some reason with the CSS editor in lay theme - a bit strange as it is in the W3C website..

Sorry for the long questions, if its too boring I understand! Would just be good to know if this is possible with LAY otherwise ill stop messing around!

Thanks,

D

[DMB]

@arminunruh Ok so ignore everything i've written here! I figured it out - i had a space between 'url' and the ( which was invalidating my background image. All working - the blend modes are great!