Problem with my PNG images - Add a black background on it

[Laetitia11]

Hello ! 

I have a problem with the background of my PNG images.
On this site: https://shop.pandacraft.fr/ > section in the middle of the website (on Dawn version 7.0.1 theme)

I have a black background on some PNG images. But not all of them !
And sometimes the black background doesn't show on desktop but on mobile yes. It is like random.

I tried everything by searching the Shopify forum:
- change the image exports (RGB color, size, compression, flow to export, ...)
- change the CSS of the image background, nothing either

I don't have a solution anymore... Can someone help me ? Thank you !

[tim · Accepted solution]

Hi Letitia, 

this section looks like it was created by Axome developers and not a part of base Dawn.

To implement responsive images they submit a set of smaller sources for each picture, however, for these smaller images they convert your original PNG to a JPG (which makes it load faster as JPGs are generally much smaller than PNGs).

This is when black background appears because JPGs do not support transparency -- it's a part of the image and you can't fix it with CSS

Note the format=pjpg parameter which instructs Shopify image engine to convert image to JPG.

If you try to right-click this image and save it, it will be saved as a JPG.

Also note that the biggest image is PNG, so if your original image is not too wide, browser will use this master PNG image and background will still be transparent.

This is also a reason why you see more blacks on mobile -- because browser uses more smaller JPG images for narrow mobile screen.

This should be trivial to fix, but it's hard to suggest the exact solution without seeing the section code.

Here is the documentation on format conversion option: https://shopify.dev/docs/api/liquid/filters/image_url#image_url-format 

[Laetitia11]

Thank you very much! It helped me a lot, I found the solution! (I just had to change the image display format in the code)

[brightspark]

I too ran into the same issue and I was able to fix this by changing pjpg to just jpg in the media.liquid file for the pipeline theme, not sure about other themes but it may follow the same..

I am attaching the screenshot for reference:

[Reinhart]

Hi there, I wanted to make my product backgrounds black instead of the ordinary white background for my Product PNG Images. When I change my theme to black, it leaves the PNG backgrounds to white.

How do I do this? Thank-you for your time in advance. (SIDE-NOTE MY THEME IS CURRENTLY WHITE BECAUSE I DON'T WANT SOMEONE TO VIEW IT AND IT BE BLACK WITH WHITE PNGS IT LOOKS UNPROFFESIONAL, I WILL CHANGE MY THEME TO BLACK AFTER THE CSS CODE HAS BEEN ENTERED.)

Here is my page - https://rmtperformance.com/

I want it like this page - https://houseofurban.co.uk/collections/defender-2020/products/urban-design-pack-new-defender

 This is how I want it

How do I add this line of code to the refresh theme, I have the folder and code, but I don't see any line of code for format. Any ideas on how I can add this code? 

[tim]

The topic is about source PNG with transparent areas being converted to an image format which does not support transparency and transparent areas are being filled with black because of this.

In your case it looks like (at least some of) your original images have no transparency as some of them are JPGs.

It's not possible to achieve your goal with simple theme edit.

You'd need to use some service/app which will edit your images by removing white areas and making them to transparent.

[Reinhart]

Appreciate that, seems like there's no work around for this problem. Time to change 500+ Product Images.