Background Opacity

Hi

On my homepage, I have an overlay which works fine, but I wanted to add our newly acquired Trip Advisor Certificate of Excellence to the overlay. That part of it has worked fine, but the image is a transparent png, so I have given it a white background. My problem is I want to control the opacity of the background, but instead I am controlling the opacity of the image

This is what I have added to my overlay box:

<img class="coe" src="http://wordpress-102462-558755.cloudwaysapps.com/wp-content/uploads/2018/08/Trip-Advisor-COE.png" alt="Trip Advisor Certificate of Excellence" style="background-color: white; opacity: 0.9; border-radius: 35px;" width="1300" height="150">

The background colour works well as does the border radius. but if I reduce the opacity, the whole image is affected. I have done it all inline to date, but happy to use the image class in CSS if need be. I have tried changing opacity to background-opacity or border-opacity and nothing happens

Are you able to assist as to how to change just the opacity of the new background?

Thanks again

ah, silly me. of course; change background-color: white; to background-color: rgba(255, 255, 255, 0.8);

I’d forgotten using opacity in the color itself

Worked a treat.

Sorry to have troubled you

regards

No Problem!

Thanks you

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