How do I remove the background color in image banner?

Store Design
, ,

Topic summary

A user is experiencing an unwanted light brown background color appearing behind their image banner on their Shopify store’s FAQ page. They want it to display as plain white instead.

Initial diagnosis: The first responder suggested the issue was white space in the image itself and recommended cropping and re-uploading.

Problem persists: After replacing the image without white space, the light brown background remained visible.

CSS solutions provided: Three community members offered CSS code fixes:

  • Add .media{background-color: #fff;} to base.css
  • Add .banner__media.media { background: transparent !important; } via Theme settings > Custom CSS
  • Add .banner__media.media { background: #fff; } to base.css

All solutions target the .banner__media.media class and involve adding CSS code to either the base.css file or the Custom CSS section in theme settings. One responder confirmed their solution worked with a screenshot showing the corrected result.

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

tinee_0-1737688231588.png
tinee_0-1737688231588.png1847×759 225 KB

A light brown background color appears behind the image. I want it to be just plain white, how do I do that?

site: https://bagsinthecitymanila.com/ (faqs)

1 Like
2

Hello @tinee the image has white space. Please crop the image and re-upload it; the space will automatically be removed.

Image url - https://bagsinthecitymanila.com/cdn/shop/files/Untitled_design_2_500a578c-d596-4115-98be-6c2b08224fdb.png?v=1737611154&width=1500

devcoders_0-1737688966014.png
devcoders_0-1737688966014.png1191×615 142 KB

1 Like
3

Hello! I tried replacing the image with no white space. But it still shows the light brown background color behind the image.

tinee_1-1737689176170.png
tinee_1-1737689176170.png1840×788 251 KB

tinee_0-1737689150406.png
tinee_0-1737689150406.png1886×851 162 KB

1 Like
4

@tinee please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.media{background-color: #fff;}
1 Like
5

Hi @tinee ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

.banner__media.media {
    background: transparent !important;
}

Here is the result:

DaisyVo_0-1737689508806.png
DaisyVo_0-1737689508806.png908×567 125 KB

Please let me know if it works!

Best,

Daisy

2 Likes
6

Hello @tinee

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.banner__media.media {
    background: #fff;
}
2 Likes