Making the product card background transparent - Dawn Theme

[Hensolo]

Hi, 

I am trying to make the background for the picture within my product cards to be transparent but it seems to default to black in the Shopify Dawn theme current version. Where can I change this setting or where should I put custom code to fix this?

As you can see from this screenshot, I have set the colour scheme to transparent, but the background to the product card appears black, but you can see that in the screenshot that the same product pictures displays correctly just below it. 

Here is a preview link to my draft store page:

https://jbayf0dsajl5xi5y-56906317957.shopifypreview.com
 
Thanks for your help.

Matt

[suyash1 · Accepted solution]

@Hensolo please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

.product-media-container{border: none !important; background-color: transparent !important;}

[Hensolo]

Thanks for your help, this solution worked for me. Much appreciated. 

[Alabi_Agency2]

"Hey @Hensolo, I see you're trying to make the product card background transparent in the Dawn theme. The CSS solution provided by @suyash1 should work, but if you need further help with Shopify theme customizations, feel free to reach out. I specialize in Shopify design and marketing. Happy to assist!"

[tim]

Try to avoid theme code edits. Editing theme code will prevent it from updating.

My solution would be to add this code to the product info sections setting "Custom CSS":

.product-media-container {
  --color-background: transparent;
  --color-foreground: transparent;
}

[Hensolo]

Thank you Tim - your solution worked too and I agree it is better to avoid theme code edits. 

To the other shopify noobs reading this - use Tim's solution!