Debut: gray background instead of transparent

Store Design
1

Hello,

Every product image that I upload with a transparent background (.png file) gets an annoying gray background. (debut theme)

How can I remove this? And let it be just transparent.

2021-03-29_16-22-51.png
2021-03-29_16-22-51.png1525×782 91 KB

I have tried solutions from similar posts but they didn’t work. Also, the header logo had the same problem but it was successfully solved with:

.site-header__logo-image {
background: transparent!Important;
animation: none!important;
}

Thanks in advance! :slightly_smiling_face:

2

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

3

Sure!

Page link is:

https://grupogalatae.com/products/balsamo-capilar-cabellos-rubios-limon-y-miel

2021-03-29_16-22-51.png
2021-03-29_16-22-51.png1525×782 91 KB

If you need anything else, just let me know.

4

Hello There,

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.template-product [data-image-loading-animation] {
background-color: transparent !important;
}
5

It worked.

Issue solved.

Thank you very much! Very appreciated! :slightly_smiling_face:

1 Like
6

Kindly feel free to get back to me if you need any further assistance Thanks!

7

Hi! I am having the same issue and could use your help with this, please! I tried pasting in the following code right after this code from my Debut theme. Did I paste this in correctly? My logo is still showing up with gray background. What am I doing wrong?

{{ ‘theme.scss.css’ | asset_url | stylesheet_tag }}.template-product [data-image-loading-animation] {
background-color: transparent !important;
}

}

8

Hello ZestardTech!

It appears this issue may have changed some since the solution was posted 3-30-21

Any chance you can attempt/repeat/revise the process in today’s environment and update the process path instructions?

Thank you!