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>

1 Answer 1

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.

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 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 Mar 10, 2019 at 12:37

Your Answer

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

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