Magento2: how to auto add grey bg color under photo












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>





magento2 styles







share|improve this question





























    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>





    magento2 styles







    share|improve this question



























      1












      1








      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>





      magento2 styles







      share|improve this question
















      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>





      magento2 styles




      magento2 styles






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 14 hours ago







      Sylvester

















      asked 15 hours ago









      SylvesterSylvester

      705216




      705216






















          2 Answers
          2






          active

          oldest

          votes


















          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.






          share|improve this answer
























          • 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
            14 hours ago













          • But now I see images width and height are changed. (update2) on quesiton.

            – Sylvester
            14 hours ago











          • you need to adjust width and height or giv try by removing <aspect_ratio> tags first

            – Naveed Asim
            14 hours ago











          • 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
            14 hours ago











          • 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
            14 hours ago



















          0














          Upload image with grey background



          OR



          Set container background color as grey and add transparent image (.png format)






          share|improve this answer























            Your Answer








            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "479"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: false,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f265163%2fmagento2-how-to-auto-add-grey-bg-color-under-photo%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            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.






            share|improve this answer
























            • 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
              14 hours ago













            • But now I see images width and height are changed. (update2) on quesiton.

              – Sylvester
              14 hours ago











            • you need to adjust width and height or giv try by removing <aspect_ratio> tags first

              – Naveed Asim
              14 hours ago











            • 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
              14 hours ago











            • 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
              14 hours ago
















            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.






            share|improve this answer
























            • 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
              14 hours ago













            • But now I see images width and height are changed. (update2) on quesiton.

              – Sylvester
              14 hours ago











            • you need to adjust width and height or giv try by removing <aspect_ratio> tags first

              – Naveed Asim
              14 hours ago











            • 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
              14 hours ago











            • 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
              14 hours ago














            2












            2








            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.






            share|improve this answer













            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.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered 15 hours ago









            Naveed AsimNaveed Asim

            2,6842317




            2,6842317













            • 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
              14 hours ago













            • But now I see images width and height are changed. (update2) on quesiton.

              – Sylvester
              14 hours ago











            • you need to adjust width and height or giv try by removing <aspect_ratio> tags first

              – Naveed Asim
              14 hours ago











            • 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
              14 hours ago











            • 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
              14 hours ago



















            • 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
              14 hours ago













            • But now I see images width and height are changed. (update2) on quesiton.

              – Sylvester
              14 hours ago











            • you need to adjust width and height or giv try by removing <aspect_ratio> tags first

              – Naveed Asim
              14 hours ago











            • 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
              14 hours ago











            • 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
              14 hours ago

















            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
            14 hours ago







            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
            14 hours ago















            But now I see images width and height are changed. (update2) on quesiton.

            – Sylvester
            14 hours ago





            But now I see images width and height are changed. (update2) on quesiton.

            – Sylvester
            14 hours ago













            you need to adjust width and height or giv try by removing <aspect_ratio> tags first

            – Naveed Asim
            14 hours ago





            you need to adjust width and height or giv try by removing <aspect_ratio> tags first

            – Naveed Asim
            14 hours ago













            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
            14 hours ago





            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
            14 hours ago













            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
            14 hours ago





            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
            14 hours ago













            0














            Upload image with grey background



            OR



            Set container background color as grey and add transparent image (.png format)






            share|improve this answer




























              0














              Upload image with grey background



              OR



              Set container background color as grey and add transparent image (.png format)






              share|improve this answer


























                0












                0








                0







                Upload image with grey background



                OR



                Set container background color as grey and add transparent image (.png format)






                share|improve this answer













                Upload image with grey background



                OR



                Set container background color as grey and add transparent image (.png format)







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered 15 hours ago









                soofzsoofz

                559




                559






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Magento Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f265163%2fmagento2-how-to-auto-add-grey-bg-color-under-photo%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    How to label and detect the document text images

                    Image
                    1 $begingroup$ This is what I mean as document text image: I want to label the texts in image as separate blocks and my model should detect these labels as classes. NOTE: This is how the end result should be like: The labels like Block 1, Block 2, Block 3,.. should be Logo, Title, Date,.. Others, etc. Work done: First approach : I tried to implement this method via Object Detection, it didn't work. It didn't even detect any text. Second approach : Then I tried it using PixelLink. As this model is build for scene text detection, it detected each and every text in the image. But this method can detect multiple lines of text if the threshold values are increased. But I have no idea how do I add labels to the text blocks. PIXEL_CLS_WEIGHT_all_ones = 'PIXEL_CLS_WEIGHT_all_ones' PIXEL_C...
                    Read more

                    Vallis Paradisi

                    Image
                    Coordinata: .mw-parser-output .geo-default,.mw-parser-output .geo-dms,.mw-parser-output .geo-dec{display:inline}.mw-parser-output .geo-nondefault,.mw-parser-output .geo-multi-punct{display:none}.mw-parser-output .longitude,.mw-parser-output .latitude{white-space:nowrap} 33°03′S 71°37′W  /  33.05°S 71.617°W  / -33.05; -71.617 Vallis Paradisi Res apud Vicidata repertae: Civitas : Chilia Numerus incolarum : 296 655 Zona horaria : UTC-4 Situs interretialis Nomen officiale : Valparaíso Gubernium Consilium : municipal council of Valparaíso Geographia Superficies : 401 600 000 Metrum quadratum Coniunctiones urbium Urbes gemellae : Ovetum , Badalona , Santa Fe , Ora longa , Sciamhaevum , Quantunia , Callao , Bat Yam , Melaka , Novorossiysk , Busan , Corduba , Odessa , Rosario , Malacca , Barcino , Soteropolis , Franciscopolis (California) , Guanajuato, Silao Tabula aut despectus Despectus in portum sinumque et urbem Vallis Paradisi Vallis Para...
                    Read more

                    Tabula Rosettana

                    Image
                    Tabula multilinguis Rosettana in Museo Britannico ostenditur. Tabula Rosettana, [1] etiam titulo OGIS 90 agnita, est stela decreto de rebus sacris in Aegypto anno 196 a.C.n. lato inscripta. Tabula iuxta Rosettam Aegypti, urbem in delta Nili et ad oram maris Mediterranei iacentem, anno 1799 a milite Francico reperta est. Inventio stelae, linguis duabus scripturisque tribus inscriptae, eruditis Instituti Aegypti statim nuntiata est; ibi enim iussu imperatoris Napoleonis eruditi omnium scientiarum (sub aegide Commissionis Scientiarum et Artium) properaverant cum expeditione Francica. Qua a Britannis mox debellata, tabula Rosettana Londinium missa hodie apud Museum Britannicum iacet. Textus Graecus cito lectus interpretationi textuum Aegyptiorum (in formis hieroglyphica et demotica expressorum) gradatim adiuvit. Denique textum plene interpretatus est Ioannes Franciscus Champollion. Ab opere eruditorum cumulativo coepit hodiernus scripturae hieroglyphicae linguaeque Aegyptiae a...
                    Read more