How can I fix a non-transparent .png issue on my custom Whisk theme homepage?

Store Design
, , ,
1

I customized the Whisk Shopify Theme. However the first .png image on my homepage shows what should be transparent as solid white. I set a custom background like this in the theme.liquid:

#MainContent {
background-image: url(https://cdn.shopify.com/s/files/1/0784/2906/1448/files/gaus-luetje-hintergrundbild-kartoffelsack.jpg?v=1698401250);
background-size: cover;
background-position: center;
background-attachment: fixed;
}

I have tried:

  • CSS Rule to override the background from that section and it didnt work:
    .banner–template–19914495885640__image_banner {
    background-color: transparent !important;
    }
  • Saving the image as .webp to outrule conversion issues (didnt work).

Honestly im at my wits end for this. The Shop is attached: https://4f6a5c-4.myshopify.com/

Could someone point me in the right direction for this?

2

Hi @Richard_58

I’m not sure I understand what you want to do.

Can you tell me what you want to achieve?

And what’s the issue preventing your goal right now?

3

Hey FoxEcom,

i had a picture as the main header on my site that was transparent .png. However, when I uploaded the picture it showed the transparent section as solid white. I haven’t been able to find a fix or solution so I just swapped for another picture :blush: .

4

Hello @Richard_58

This sounds tricky for me to look into cause I don’t have the file.

You might want to try checking for some answers here.

Good luck! :slightly_smiling_face: