Product Image Backgrounds

I want to have a grey background on each product on the store. If I upload a product with a PNG image without a background, the background is automatically white or “clear”. Like this:

How can I set this to Grey? Without changing the product background image photo by photo?

So it appears like this instead:

Thanks!

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.image-action-zoom .owl-carousel .product-image-wrap {
    background: grey;
}

Best Regards

That worked for the product page photo and I also have it working on the product grid.

However still two backgrounds missing. First is on hover of the image on the product page, the background becomes white again on mouse over (I have the mouse over zoom effect) as seen here:

The second I have noticed is the background missing from the previews below the product photo, as seen here:

Please provide code to fix the background for both of these now I have a PNG product image with colour F7F7F7.

Hello,

Please provide your site admin access to the private area.

Also please provide page URL with the problem.

Best Regards

Shared admin access.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

1.

body .image-action-zoom .zoomImg[src$=".png"] {
    background-color: #F7F7F7;
}
.woodmart-lazy-fade.woodmart-loaded:hover {
	background:#F7F7F7.;
}

Not clear as for the second image https://prnt.sc/vtj4rt it has the background already, it is not white.

Best Regards

[Author]

Posts