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 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.

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.

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront