Remove Grey Around Circle Images In MultiColumn Section Dawn Theme

Topic summary

A user seeks to remove or make transparent the grey background appearing around circular images in the Dawn theme’s multicolumn section.

Proposed Solutions:
Multiple community members provided nearly identical CSS fixes:

  • Navigate to Online Store > Themes > Edit Code > Assets > base.css
  • Add CSS targeting .multicolumn-card__image-wrapper:before with background: transparent !important; or background-color: transparent;

Current Status:
One user reported the suggested CSS solution did not work on their site. A follow-up attempt to troubleshoot was blocked because their store is password-protected, preventing further diagnosis.

Note: The original posts contain reversed/mirrored text and embedded images showing screenshots and code snippets that illustrate the issue and solutions.

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

Hello Everyone.

On my website, how do I remove the grey around the circles within the multicolumn sections? I think if the grey wasn’t there, it would actually look nice. But with the grey around the circle images, yuck!

My website is www.PennsylvaniaParks.org

Thanks so much!

1 Like

Hi @Justin34

You can add this CSS code to base.css file in your Online store > Themes >Edit code > Assets to remove that grey background

.multicolumn-card__image-wrapper:before {
background: transparent !important;
}

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.multicolumn-card__image-wrapper:before {
background-color: transparent;
}

Hi @Justin34

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

.multicolumn-card__image-wrapper:before {background: none !important;}

Regards,

San

1 Like

Hi @Justin34

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.multicolumn-card__image-wrapper {
   background: transparent !important;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

Hi Dan! I tried the solution, but it doesn’t seem to work for me. Could you help me out here! Thanks.

I want to hide/make transparent the grey box of the multicolumn on my contact us page here - www.freshroute.in/pages/contact.

I don’t want to disturb the general template of the square grey box

Hi @hetdedhia , Your store has a protected password.