Make the background of product images a light grey color - spotlight theme

[JSPENCER0203]

Hi everyone.

I am using the spotlight theme. I want to add some color to the images. My product images have transparent backgrounds. So I would love to make the background a light grey color. Is there anyway this can be done?

My website is www.PPFMerch.com and the password is abc123.

Thank you!

[BSSCommerce-HDL]

Hi @JSPENCER0203, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.media.media--transparent.media--hover-effect {
    background-color: lightgray !important;
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Dan-From-Ryviu]

Hi @JSPENCER0203 

You can do that by adding this code to Custom CSS of your theme in Online Store > Themes > Customize > Theme settings 

.product-media-container .media,
.card--standard .card__inner:after {
background: #f1f1f1;
}

[namphan]

Hi @JSPENCER0203,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.collection-card-wrapper .media.media--transparent {
    background: #808080b0;
}

[websensepro]

Hi @JSPENCER0203 ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.product-media-container .media,
.card--standard .card__inner:after {
     background: #f1f1f1 !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!