Image Banner - Transparent image has white background

Store Design
, , , , ,

Topic summary

A Shopify store owner using the Dawn theme encountered an issue where transparent PNG images displayed with an unwanted white background when added to the image banner section.

Initial troubleshooting:

  • First suggested solution involved CSS targeting .banner__content elements, but this caused the image to animate off-screen and left a white space.
  • There was brief confusion about whether the image actually had transparency, which was confirmed via screenshot.

Resolution:
The issue was solved by adding CSS code to the theme’s base.css/style.css file:

.banner__media.media.scroll-trigger.animate--fade-in img {
    background:radial-gradient(rgba(167, 167, 167, 1), rgba(80, 80, 80, 1) 100%);
}

This applies a gradient background behind the transparent image, effectively replacing the white background. The solution was confirmed working by the original poster.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi! I need help with my transparent image turning into a white background within the image banner section. I’ve tried multiple code solutions, but none of them have worked so far. Any advice or working examples would be greatly appreciated!

Theme: Dawn

Website: https://wxccqp-af.myshopify.com
Password: bowgla

Screenshot_43.png
Screenshot_43.png1191×814 131 KB

1 Like
2

Hi @ShopElle

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
    background: white;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

3

Hi @websensepro

Thank you for your assistance. Unfortunately that code doesn’t work, all it does is animate my image out of the screen and leaves a full white image.

Screenshot_30.png
Screenshot_30.png1172×772 11.3 KB

4

So you want to remove this image and also eliminate the space it is creating?

5

No, the original png image has a transparent background. When I add the media into the image banner it automatically adds a white background onto it. I want to remove the white background and have my original transparency.

Here is the original image:

closeuprenderbwfrank-ezgif.com-optipng.png
closeuprenderbwfrank-ezgif.com-optipng.png1920×1080 315 KB

6

Your image does not have a transparent background; the image itself has a background.

websensepro_0-1735562875131.png
websensepro_0-1735562875131.png1125×509 215 KB

7

My image is indeed transparent, the text box must’ve added a background when you opened it in another tab.
Any further solutions is greatly appreciated!

Screenshot_31.png
Screenshot_31.png1180×643 365 KB

8

Hi @ShopElle

Yes its transparent.

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.banner__media.media.scroll-trigger.animate--fade-in img {
    background:radial-gradient(rgba(167, 167, 167, 1), rgba(80, 80, 80, 1) 100%);
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
9

Thank you so much @Made4uo-Ribe this solution worked perfectly!

10

Welcome! Would you mind hitting ‘like’ as well? Thanks!

Happy New Year!