Method to change background color of images with css

Store Design
1

Hi,

I’m trying to render product images with gray backgrounds whenever possible, such as when the image already has a single white or light background (most of our images have white backgrounds). But, I’m not sure what the method is to achieve this.

I believe it IS possible using some type of css code or something, because Pinterest does something like this.

Our images show on Pinterest with gray backgrounds even though on our website, they have white backgrounds and they are also in JPG format, not PNGs. So, I think there is some method using coding that can do this. But how is it done?

I’ve read some things on a mix-blend-multiply mode in css or reducing the opacity, etc. But I’m not sure if they apply or where to even start and I want to be sure that the most popular browsers are supported.

Does anyone have any suggestions on the best way to achieve this?

Thank you!

2

Hello @mandyco

Can you share your website URL so that I can check and provide you with the solution?

1 Like
3

Thank you for offering to help!

I hired a coder to do this and he was able to make the desired changes. He did so by applying a gray filter over the images in css.

Thanks again!