Change Product Background to Grey but only for my Homepage

[DFSouth]

Hi, I have a question for the product background. I'm using a Dawn Version 12.0.0 Theme and building a Homepage with a page plug in, Gempages Builder. On that homepage, I want to change all the products shown as grey background or grey cart but not changing any images from those products. I mean I want to keep the same thing for the product images and other product pages as white background. But for for the homepage, I want first product images shown with grey background like other fashion ecommerce sites doing with proof below. How can I do that? Thanks. 

This is my homepage: https://dfsouth.com.au/ and you can see products shown on my homepage that I wanna make grey background for their first image. 

Here are the proof/things that I wanna do the same from other companies:

[iffikhan30]

Hello @DFSouth ,

I check you website. Your images are not PNG format first you can do images Png format then apply the color.

[DFSouth]

Hi, all my images are PNG before. What do you mean by not PNG cause I downloaded from Canva PNG.

[iffikhan30]

Hello,

I mean that, you photos have background color white, on PNG behavior without background, you can remove white background. 

[DFSouth]

Hi Iffikhan30,

You mean I should post them with transparent background rather than with white background for product images? Last time I tried to pose the transparent background already but it doesn't work tho.

[iffikhan30]

Hello,

You upload transparent background image and give me the link of product I will show you.

[DFSouth]

Hi Iffikhan30,

I just downloaded the PNG transparent version and put it in the Shopify system for the first picture of this Gucci item. However. the homepage still havent got that grey background like others yet. Here is my homepage: https://dfsouth.com.au/.

And this is the product link for the first item in the best seller category: https://dfsouth.com.au/products/ophidia-large-gg-tote-bag. 

[DFSouth]

Hi,

I saw the difference on the collection page for the grey background but that's not my plan. The point is I only want to have grey background ONLY ON MY HOMEPAGE, the rest should be white. Is there anyway that I can do that? Btw, I'm using a page builder plugin, named GemPages Builder but they don't have the function to appear the grey background colour on homepage like others. If you have a look at other websites, like Farfetch they only show grey background in the homepage but when we click on to the product page or collection page, they are still with white, which is what I want. Here are some reference pictures: 

[iffikhan30]

Hello @DFSouth ,

If this your not plan but what png image to achieve this task,

1) First you PNG images 

2) Only featured collection add background to add this css you problem has been resolved no need extra app.

div#gp-carousel-product-list-carousel-gNfSZnpe1O-template--15912541225199__gp_section_495606397359096968 .gem-slider > div {
    background: #000 !important;
}

Become

[DFSouth]

Hi,

I did put your code in the base.css and it works. However, the thing I wanna do is showing the product background as grey colour #fafafa ONLY ON MY HOMEPAGE. For the rest of other pages, it should be white/transparent. Is there anyway to stop showing grey colour background on other pages?. Thanks.

[iffikhan30]

Hello @DFSouth ,

I check your view all bag page, this is not my CSS code you add by yourself or your developer, 

Ok you can remove the background and issue will be resolved.

[DFSouth]

Hi Iffikhan30,

I believe that I did put your code at the end of the base.css. Here: 

So what should I do now? Should I still keep the transparent PNG image or what?  And how can I remove the background ?

Thanks

[DFSouth]

Hi Iffikhan30,

So I should remove the background which means deleting this whole code, that i highlighted from 279 to 286 out of the base.css and it's gonna work? 

[iffikhan30]

Hello @DFSouth ,

No no not whole just delete backgroud-color link.

[DFSouth]

Hi Ifffikhan30,

How can I delete the background-color link? In the picture I sent to you, is there any code that I need to delete or just keep the same? 

Thanks 

[iffikhan30 · Accepted solution]

Hello,

I told you last comment just delete background-color line that's it,

1) Go to online store

2) Edit code

3) search base.css

then I show picture on line number.

[DFSouth]

Thanks, I already fixed.