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
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.
php bin/magento catalog:images:resize
command after you had passed parameters in view.xml to regerate the new images. That should have done the trick.