Solved

PNG-images not transparent in some places on my webpage

siw
Tourist
9 0 7

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:

Skærmbillede 2022-03-13 kl. 17.54.54.png

Skærmbillede 2022-03-13 kl. 17.55.46.png

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

Accepted Solutions (2)

AvadaCommerce
Shopify Partner
3879 839 951

This is an 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.

banned

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@siw 

yes, please add this code

.callout-image {
    background: transparent !important;
    box-shadow: none !important;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 8 (8)

AvadaCommerce
Shopify Partner
3879 839 951

This is an 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.

banned
siw
Tourist
9 0 7

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...

siw_0-1647276485528.png

How do I fix that? 🙂

 

mariethiffault
Visitor
1 0 0

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

KetanKumar
Shopify Partner
36839 3635 11972

@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?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
siw
Tourist
9 0 7

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
Shopify Partner
36839 3635 11972

This is an accepted solution.

@siw 

yes, please add this code

.callout-image {
    background: transparent !important;
    box-shadow: none !important;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
siw
Tourist
9 0 7

Thank you so much - works perfectly! 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@siw 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing