Impluse theme - Transparent images don't appear transparent

DPDigital · ‎06-10-2024

I've uploaded transparent PNGs to my site, but whenever I add a background color to a section, the images appear with a white box or background.

This is the code I use directly on the section :

{
background-color: #fcbf;
}

Then I attempted to edit the theme code with the code below before the <body> . It did not work. Please advise.
TYIA!

<style>
.card--card:after, .card--standard .card__inner:after {
display: none;
}
</style>

Liquid_xPert_SJ · ‎06-11-2024

@DPDigital can you please share the store url? so that i can look into it.?

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee ☕ for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee ☕ for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

DPDigital · ‎06-11-2024

www.oliveu.com

Thank you.

tim · ‎06-11-2024

One possibility is that an image, or image wrapper may have a background setting of its own.

Or, sometimes a theme may convert image from PNG to JPEG to save on image file size.

Hard to tell without seeing your actual store.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

DPDigital · ‎06-11-2024

Hi.

The URL is https://www.oliveu.com.

I removed the background color code from the product sections and I absolutely uploaded transparent .pngs.

Thanks so much.

tim · ‎06-11-2024

You'd only need to add the following to your Custom CSS for this section:

.grid-product__image-mask {
  --colorBody: #fcbf;
  --colorSmallImageBg: #fcbf;
}

This will remove white background from the image wrappers.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Rahul_dhiman · ‎06-11-2024

Hello @DPDigital ,
Ensure that the PNG images are surely transparent and not saved with a white background. You can confirm this by opening them in an image editor like Photoshop or GIMP.
If you need help, provide me the URL of your store.

Was I helpful?

Buy me a coffee

❤

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

DPDigital · ‎06-11-2024

H @Rahul_dhiman

I uploaded transparent pngs. the URL is www.oliveu.com.

Thank you.

Rahul_dhiman · ‎06-11-2024

Great @DPDigital ,
Please check the video I have created .

Was I helpful?

Buy me a coffee

❤

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

DPDigital · ‎06-11-2024

Thank you for the information @Rahul_dhiman .

Please see the link below which describes what I am attempting to accomplish.

https://jmp.sh/6ezXrIq5

Rahul_dhiman · ‎06-11-2024

Hi @DPDigital ,
So please check the video . As I think I would be able to resolve it if I am provided access to the shop .

https://www.awesomescreenshot.com/video/28538405?key=e70e3936b925e44503cccb206cd2be96

Was I helpful?

Buy me a coffee

❤

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

DPDigital · ‎06-11-2024

Hi @Rahul_dhiman - thank you for the information however, I was planning to make sections of the page a bacgkround color like i did for Father's Day

DPDigital · ‎06-11-2024

@Rahul_dhiman

Thank you for the video, I sent you an email.

Impluse theme - Transparent images don't appear transparent