Need help to remove grey background from transparent logo image - debut theme

Store Design
1

Hello,

I have tried a few online recommendations and snipets of code but they are not working. it is unfortunate that debut does not have a ‘transparent logo’ option like other themes.

My logo is transparent, Im trying to remove the grey boarder/outline
My logo is transparent, Im trying to remove the grey boarder/outline396×140 9.98 KB

My logo is transparent and im trying to get rid of the grey box surrounding it. thank you!

2

@JasperBloomfiel - please share your website url and password if any.

3

https://thelegochain.myshopify.com/

pass - deisti

made for mobile view :slightly_smiling_face: thanks for your help in advance!

4

@JasperBloomfiel - add this to the very end of your theme.css file

@media only screen and (max-width: 749px)

{
.site-header__logo img {background-color: #fff;}

}

5

Thank you very much, Fixes the problem in mobile view perfect for me.

6

@JasperBloomfiel - welcome , if you have any issues then you can contact me on my given email below.

7

Hi,

I’m having the same issue all of a sudden with my theme. It’s showing grey background for all transparent PNG images.

The logo’s background colour is set to variable and if I change it to white nothing happens.

It only happens on the home page.

.site-header {
  position: relative;
  background-color: var(--color-body); }
   only screen and (max-width: 749px) {
    .site-header {
      border-bottom: 1px solid var(--color-border); } }
   only screen and (min-width: 750px) {
    .site-header {
      padding: 0 55px; }
      .site-header.logo--center {
        padding-top: 30px; } }

Why does this happen?

Thanks

8

@scottyvalentine - can you please share your website link to check?

9

Sure thanks

www.designerpet.shop

10

@scottyvalentine - logo is set to max-width:250px, that is causing that grey background

11

ok, let me change it and see. THANKS!

12

Hey Suyash,

Why do you think that’s the case. That’s a setting that’s set in the shopify user interface editing panel and it WAS only until I had an app added. Logically it’s in the app so I’m also talking to the publishers of the app.

Thanks Suyash.

Scott

13

@scottyvalentine - add following css and check

.site-header__logo img{    max-width: 100%;    background: #fff;}
14

Hey,

That sort of worked. The IMAGE’s background turned to white but it must be in a table and that table is remaining Gray. So I assume there’s something generally wrong with an overall setting. The images down the page are doing the same thing.

15

@scottyvalentine - checking them

16

@scottyvalentine - add this and check

.feature-row__image-wrapper .feature-row__image {background: #fff;}
17

Success! on the images at least. So thanks!

The logo is still not working right.

18

Can I change the background of the site header?

site-header__logo-image site-header__logo-image--centered

I really don’t get classes, a big part of why I gave up programming 20 years ago.

19

@scottyvalentine - can you try by adding this? , it is making image bit blurry but I think you can set it to max width from backend, yes header background color too can be changed, will need multiple line css code

.site-header__logo img {
    max-width: 100%;
    background-color: #fff;
}
20

yeah I can’t get it to work. Not sure what’s happening.