How to make transparent product photos have a white background instead of taking on the background color of the website?

Question

Magento 2.4.2-p1
Smartwave Porto theme

I really love how the new Magento 2.x takes on the website background color with transparent images. The problem we are having is that some of our images have the transparent PNG format while others actually have a white background so in 1 row will have transparent, white, white, transparent and so on... Magento 1.9.4 displayed the same transparent product photos with a white background. How can we force Magento 2.4.2-p1 to do the same?

---

UPDATED on September 8th:

I found these 2 articles:

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/theme-images.html

https://community.magento.com/t5/Magento-1-x-Theming-Layout/How-to-remove-white-space-around-product-image-in-magento-2-Luma/td-p/83105

I then found the view.xml file in:

   /public_html/app/design/frontend/Smartwave/porto/etc
/public_html/app/design/frontend/Smartwave/porto_rtl/etc
/public_html/app/design/frontend/Smartwave/porto_child/etc

and added the false code into the following in all of the 3 locations mentioned above:

<image id="category_page_grid" type="small_image">
                <width>300</width>
                <height>300</height>
                
                <transparency>false</transparency>
                
            </image>
            <image id="category_page_grid-hover" type="thumbnail">
                <width>300</width>
                <height>300</height>
                                
                <transparency>false</transparency>
                
            </image>
            
            
            <image id="category_page_list" type="small_image">
                <width>300</width>
                <height>300</height>

                <transparency>false</transparency>

            </image>

But it doesn't work! Is this the right path and do I need to put that code somewhere else (or differently) in this file to make it work?

---

UPDATED on September 10th, 2021:

I contacted Smartwave Porto and they responded with:

"And please also understand that how the products show and works is the behaviour of the Magento default, not related to the Theme."

I checked and I have absolutely nothing in:

/public_html/app/design/frontend/Magento

What do I need to do to make this change? It feels like I almost got it but I'm missing something?

---

UPDATED September 11th, 2021:

The solution from Manish Bhojwani below will not work because every transparent image now shows up with the white background including all the logos (we can't have that) and even the little (loading) circle that pops up when you click on something and wait on the page to load.

---

UPDATED September 12th, 2021:

Manish Bhojwani might be onto something saying to:

"pass style directly to img tag, it will apply to all the images throughout the site. Add product image class reference before img tag. .class_name img {background-color: #ffffff;} "

Would anybody know what would the image class reference be for products on the front page and in category pages? Is it small_image? Would that be:

img tag. .small_image img {background-color: #ffffff;} ?

Can someone please post the exact code to use? Thank you.

Answer 1

@Allysin,

You can set the image background color using CSS and it will display background color if the image is transparent.

For Example:

img {
  background-color: #ffffff;
}

Good Luck.

Answer 2

1. Go To Here :

PORTO --> SETTINGS PANEL --> Custom Style 2

2. Put the following code into that box.

.fotorama__stage__frame img { background-color: #ffffff; }

3. Now save the configuration and from CLI run all the commands like deploy, upgrade, caching and then check.

Answer 3

Look at this and play around

https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Catalog/Test/Unit/Model/_files/valid_view.xml#L20-L28

<transparency>true</transparency>
<background>[255, 25, 2]</background>

should work fine.