PNG-images not transparent in some places on my webpage

[siw]

Hi Shopify,

My shopify store niicefood.dk (password: niicefood9) uses a lot of PNG pictures which are mostly successfully shown with transparent background. But the pictures have a white background on "footer promotions" and "collection callout" even though they are all png-files:

The images do all show with transparent backgrounds everywhere else on the page.

I have looked everywhere but can't seem to find a solution that actually works.

Please help me out :))

Sincerely,

Siw Kjeldgaard

 

[AvadaCommerce · Accepted solution]

Hi @siw ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/vitalmedia.css->paste below code at the bottom of the file:

#shopify-section-footer-promotions .grid__image-ratio {
    background-color: transparent !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[AvadaCommerce · Accepted solution]

Hi @siw ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/vitalmedia.css->paste below code at the bottom of the file:

#shopify-section-footer-promotions .grid__image-ratio {
    background-color: transparent !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[siw]

Thank you so much for your fast response! 🙂 It works perfectly on the "footer promotions". But unfortunately the pictures in "collection callout" still have a white background...

How do I fix that? 🙂

[mariethiffault]

I am not seeing the /vitalmedia.css ... what should i do?

[KetanKumar]

@siw 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

[siw]

I am currently using Safari but it's the same in Google Chrome. Btw 50% of my problem is now solved, just need to make the pictures in "collection callout" transparent as well 🙂

[KetanKumar · Accepted solution]

@siw 

yes, please add this code

.callout-image {
    background: transparent !important;
    box-shadow: none !important;
}

[siw]

Thank you so much - works perfectly! 🙂

[KetanKumar]

@siw 

its my pleasure to help us