How can I change the background color of my product images?

[JamessyB]

I will be uploading my product images with a transparent background.

I am using my theme colour for the product tile background which is a light grey.

This looks great on the product tiles when a customer is looking at all the products, however, when hey click on a specific product the background of the image is back to white. I have looked in the setting but am unable to change this?

[JamessyB]

I did think about doing this in Canva, having every image with the same default colour but I was hoping there would be an option to code it in to be honest. Thank you for the offer but I would be able to do that myself with the software I have. Thank you though

[JamessyB]

Hey, Thanks for your reply. Im trying to change the product background once a customer is viewing a product. Currently, when a customer is scrolling through my grid of products. The tile is grey (theme setting change) which I am happy with. However, when the customer clicks on a specific product. All of the images revert back to a white background. Does that make sense? Not sure how well I have explained it. Thanks

[JamessyB · Accepted solution]

I have managed to figure it out (for DAWN theme at least)

In code editor go to base.css and around line 2839 you will see the code below, change background colour to your desired colour. I changed mine to #f3f3f3 to match my theme.

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: #f3f3f3;
}

If you have carousel for your images, then go to code editor  andgo to section-main-product.css and around line 1119 you will see the code below. Again change the colour to your desired colour.

.thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  color: rgb(var(--color-base-text));
  cursor: pointer;
  background-color: #f3f3f3;
}

Hope this helps anyone with the same issue

[tahu]

This works for the product page but not for product cards on collection page or home page. Can you help with that?

[50KASHFLOW]

For novices like me, please note ".CSS" files are found in the ASSETS Folder.

[hoffmanart]

I have the same problem! Is there a fix for this?