1

Always to magento catalog I upload image .jpg with white bg color. enter image description here

Does anyone know how I can now change all products background for transparent, and add a gray background for all products under the photo?

Like this: s

update css theme.less:

.gallery-placeholder {
    background-color: #f2f2f2;
}

img.img-responsive {
    background-color: #f2f2f2;
}

img.img-responsive.product-image-photo.img-thumbnail.owl-lazy {background-color:#f2f2f2;}

img.img-responsive.product-image-photo.img-thumbnail {
    background-color: #f2f2f2;
}

.products-grid .product-item-info .product-top a.photo {background-color:#f2f2f2;}

update2: (The pictures stretched) enter image description here

view.xml:

        <image id="category_page_grid" type="small_image">
            <width>240</width>
            <height>300</height>
                 <transparency>false</transparency>
 <aspect_ratio>false</aspect_ratio>
 <frame>false</frame>
        </image>
        <image id="category_page_list" type="small_image">
            <width>240</width>
            <height>300</height>
                 <transparency>false</transparency>
 <aspect_ratio>false</aspect_ratio>
 <frame>false</frame>
Improve this question

1 Answer 1

Reset to default
2

In your theme's etc/view.xml update / set "transparency" , "aspect_ratio" and "frame" to "false" like in both grid and list view , like example below :

<image id="category_page_grid" type="small_image">        
     <transparency>false</transparency>
     <aspect_ratio>false</aspect_ratio>
     <frame>false</frame>
</image>

<image id="category_page_list" type="small_image">        
     <transparency>false</transparency>
     <aspect_ratio>false</aspect_ratio>
     <frame>false</frame>
</image>

after that flush cache and hope you will see the impact. Lastly using css you can set image box background to any color.

Improve this answer
8
  • I update view.xml and cache flush. After this on web/css/theme.less I add below code: (update on question). Can you please check I correct do for our website? gerris.pl
    – Sylvester
    Mar 10, 2019 at 12:15
  • But now I see images width and height are changed. (update2) on quesiton.
    – Sylvester
    Mar 10, 2019 at 12:17
  • you need to adjust width and height or giv try by removing <aspect_ratio> tags first
    – Naveed Asim
    Mar 10, 2019 at 12:27
  • Ok, now I detele tag <aspect_ration> and now width and height display correct. But now how to add grey bg color under image?
    – Sylvester
    Mar 10, 2019 at 12:31
  • i belive the images you have uploaded are with transparent background so now using css you can add image box background to what ever color you want
    – Naveed Asim
    Mar 10, 2019 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.