Removing default grey backgrounds from images/image banners with transparent backgrounds

Store Design
, ,

Topic summary

A user is experiencing an unwanted default grey background appearing on images and image banners that have transparent backgrounds in their Shopify store. They’ve attempted to fix it with code but without success.

Proposed Solutions:

  • PageFly-Henry suggests adding custom CSS code to the theme.liquid file before the closing tag to address the transparency issue.

  • Made4uo-Ribe provides a more detailed approach:

    • Add CSS targeting .banner__media.media with background: transparent; to the theme’s stylesheet (theme.scss.liquid, styles.scss.liquid, or base.css)
    • Also identified that the paragraph text color may need adjustment (currently not black)
    • Recommends locating and modifying the .color-background-1 property in the base.css file

Status: Multiple solutions offered with code snippets and step-by-step instructions. The issue appears solvable through CSS customization, though the original poster hasn’t confirmed which solution worked.

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

Screenshot attached with the issue.

There seems to be a default grey background for images/image banners with a transparent background. I’ve tried adding code, but nothing changed.

When I use an image banner with white backgrounds, there would be a very thin grey line around the borders depending on the browser size (it comes and goes).

Neither is ideal, so hoping to fix the grey background issue via code

Screenshot 2023-05-23 at 11.28.52.png
Screenshot 2023-05-23 at 11.28.52.png2802×984 136 KB

1 Like
2

Hello @Technical_SNZQ

Please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.

3

Hi @Technical_SNZQ ,

This is Henry at PageFly - Shopify Advanced Page Builder app.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyHenry_0-1684838576478.png
PageFlyHenry_0-1684838576478.png1600×794 139 KB

PageFlyHenry_1-1684838576483.png
PageFlyHenry_1-1684838576483.png1600×777 197 KB

Hope this answer helps.

Best regards,

Henry | PageFly

4

Hi @Technical_SNZQ ,

I understand that you want to remove the background color. You can 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 “theme.scss.liquid, styles.scss.liquid or base.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:
  4. And Save.
.banner__media.media {
    background: transparent;
}

Result:

Rose_Dim_0-1684839496808.png
Rose_Dim_0-1684839496808.png983×504 25.3 KB

I found also your Paragraph below are not black color. Something like gray. If it on purpose no need to change but if not. then you can change it.

Rose_Dim_3-1684839875176.png
Rose_Dim_3-1684839875176.png888×308 23.6 KB

Find the .color-background-1 in the base.css file.

and remove or put comment sign.

Rose_Dim_2-1684839855900.png

/* color: rgba(var(–color-foreground), 0.75); */

I hope it help.