Impluse theme - Transparent images don't appear transparent

DPDigital
Shopify Partner
7 0 0
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>

Replies 12 (12)

Liqiud_xPert_SJ
Shopify Partner
951 115 149

@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
Shopify Partner
7 0 0

www.oliveu.com

Thank you.

tim
Shopify Expert
3538 296 1314

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
Shopify Partner
7 0 0

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
Shopify Expert
3538 296 1314

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
Shopify Expert
93 16 32

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
DPDigital
Shopify Partner
7 0 0

@Rahul_dhiman 

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

Thank you.

Rahul_dhiman
Shopify Expert
93 16 32

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
DPDigital
Shopify Partner
7 0 0

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
Shopify Expert
93 16 32

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
DPDigital
Shopify Partner
7 0 0

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
Shopify Partner
7 0 0

@Rahul_dhiman 

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