How to Remove Dark Transparent Overlay on Images in Theme

Shopify Discussion

Topic summary

A user is experiencing an unwanted dark transparent overlay appearing on uploaded images in their custom Shopify theme, preventing images from displaying in their original form.

Issue Details:

  • The overlay creates a shadow effect that blends images into the theme
  • Affects banner/slideshow media sections
  • Website: velocc.shop

Solution Provided:
A CSS fix was offered to remove the overlay:

  1. Navigate to Shopify admin → Online Store → Themes
  2. Click Actions → Edit code on the active theme
  3. Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
  4. Add the following code at the bottom:
.banner__media:after, .slideshow__media:after {
    content: "";
    position: absolute;
    background: transparent !important;
    opacity: 1 !important;
}

The solution targets the pseudo-elements creating the overlay effect by forcing transparency. The discussion appears resolved with a concrete code-based fix provided.

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

I’m having an issue with my Shopify theme where images I upload aren’t displayed in their raw form. Instead, a dark transparent shadow appears over the image, blending it into the overall theme.

Does anyone know how to remove this overlay effect or adjust the settings so that the images appear exactly as uploaded, without the shadow or blending effect?

Im using a custom theme

Website: https://velocc.shop/

1 Like
2

Hi @LianYing

Which image are you referring to?

3

This one

LianYing_0-1738354607489.png
LianYing_0-1738354607489.png1911×922 271 KB

4

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:after, .slideshow__media:after {
    content: "";
    position: absolute;
    background: transparent !important;
    opacity: 1 !important;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like