Remove grey backgrounbd on transparent product images

[Digital_Imran]

Hi everyone. I hope everyone doing well.

My website shows a grey background for products with a transparent (PNG) background. Is it possible to change it to white? If so, could you provide the necessary code?

Any help would be greatly appreciated.

Here is one of the transparent product image URL: https://ladyhyphae.com/collections/therapeutic/products/pink-buffalo 

[BSSCommerce-B2B]

@Digital_Imran ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
use-animate .product__media {
  background: white !important;
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😍

[Digital_Imran]

Thanak you @BSSCommerce-B2B it works . Can you also provide codes for the collection page? I attached the screenshot.
Here is the URL of the collection page: https://ladyhyphae.com/collections/therapeutic

Screenshot: https://prnt.sc/Q-b6hHmxiYur

[BSSCommerce-B2B · Accepted solution]

@Digital_Imran , Please change the previous code like this

<style>
use-animate .product__media,
use-animate .image-animate {
  background: white !important;
}
</style>

[Digital_Imran]

Thank you so much @BSSCommerce-B2B . It works 😄

[niraj_patel]

Hello @Digital_Imran 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .product__media.image-animate.media.media--square.media-mobile--square {
        background: #fff !important;
   }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Digital_Imran]

Thank you so much @niraj_patel  sir 🙂