Remove background box from behind text on a page Dawn Theme

Store Design
, ,

Topic summary

A user needs to adjust the opacity of a white background box behind text on an image banner in the Dawn 12.0 theme. The goal is to make the background translucent rather than solid white, allowing the underlying image to show through while keeping text legible.

Solutions offered:

  • One suggestion was to completely hide the container by unchecking “Show container on desktop” in the image banner settings, though this doesn’t achieve the desired translucency effect.

  • The recommended solution involves adding custom CSS to the Image Banner section:

    .banner__box {
  background: rgba(0, 0, 0, 0.2);
}

    The RGBA color code can be customized, where the alpha value (A) controls transparency—ranging from 0.0 (fully transparent) to 1.0 (fully opaque).

The discussion appears resolved with a working CSS-based approach for adjusting background opacity.

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

I have built a few landing page templates in my store, via the theme editor, and need to make the solid white background behind the text in this image shown more translucent so part of the image appears but text is still legible.

Have tried multiple options from previous suggestions of reducing transparency percentage but my code doesn’t have this option. It’s either ‘1’ white is solid white, or off (then the text isn’t visible/clear).

I’m on Dawn 12.0. Any suggestions?

Screenshot 2024-04-16 at 1.41.50 PM.png
Screenshot 2024-04-16 at 1.41.50 PM.png3248×1162 360 KB

2

Hi @TamaraM_1 ,

You can hide this by unchecking “Show container on desktop” on the image banner section.

theycallmemakka_1-1713242981838.png
theycallmemakka_1-1713242981838.png1784×667 186 KB

3

Thanks so much for the reply. Will save this for future use, but I’m hoping to make it more translucent (shadow box) rather than disappear completely as the text is hard to read over the image. Realise my original message was mis-written.

4

Hi @TamaraM_1 , you can edit your color code so it becomes more translucent. Here is how:
Go to Online Store > Theme > Customize > Image Banner > Custom CSS and type in this code

.banner__box {
background: rgba(0, 0, 0, 0.2);
}"

You can customize the RGBA color code to fit your preference. The A is Alpha, which is a number between 0.0 (fully transparent) and 1.0 (fully opaque)
Hope this helps and have a nice day