Hi everyone,
I’m having trouble with image transparency in the Dawn theme. I’m trying to use a PNG image with a transparent background, but it’s not rendering correctly. The transparent areas appear darker or shadowed. Basically, if I set a background for the theme, even if it’s white, the “image banner” sections all have a slightly darker tint. You can see this effect in the image below. Header shows normal background. But, image with transparent background, has a slight tint to it.
Here’s what I’ve tried so far mostly with the help of AI tools:
- Checked image format and settings: I’ve confirmed that the image is a PNG-24 with transparency and is saved in RGB color mode.
- Inspected element with developer tools: I’ve used the browser’s developer tools to inspect the image and its container element. I’ve checked for background styles, opacity settings, filters, and pseudo-elements that might be affecting the transparency, but I haven’t found anything conclusive.
- Modified CSS: I’ve tried adding custom CSS to override any potential opacity or background styles, but that hasn’t resolved the issue.
- Cleared cache: I’ve cleared both the Shopify cache and my browser cache.
I’m not very familiar with CSS or developer tools, so I’m hoping someone can help me pinpoint the cause of this problem and suggest a solution.
Any help would be greatly appreciated!