CSS for Background (Page Header) Color Overlay using Opacity??

[kelly5]

kelly5

April 23, 2019 at 10:16 pm

Hi, I have managed to code an opacity on my page header images… my next thought was to make the background color something like #000000, thinking the transparency of the image would show the black a little, muddying my banner images on the fly and therefore my white Title text would work top of on any photo (no matter its values) in the headers without my having to photoshop each header photo. Do you think this is possible? I’m researching that I should do something with position, z-index, and background color rgb (0, 0, 0, 0.7) or something along those lines. I keep trying different attempts in the custom CSS with no success.

You can see on this demo blog post page that my header image looks a little washed out – that is at an opacity of 0.75. So assuming the background is white. I wanted the hidden background behind that image to be black instead. Hope this makes sense!