How to change to translucent color of the container

Store Design
,

Topic summary

A user seeks to make a container background translucent on their Shopify store.

Solutions Provided:

  • Ujjaval suggests adding CSS to base.css targeting .banner__box with rgba(255, 255, 255, 0.18) for transparency, plus border-radius and backdrop-filter properties
  • PageFly-Henry recommends inserting similar CSS code into theme.liquid before the </body> tag

Follow-up Issues:

  • Original poster reports the translucent effect only appears on desktop, not mobile
  • PageFly-Henry confirms the code should work device-wide, but the mobile display issue persists
  • Another user asks about adjusting opacity levels to make the container less transparent

Status: The desktop implementation succeeded, but mobile responsiveness remains unresolved. The discussion is ongoing with unanswered questions about mobile compatibility and opacity customization.

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

Hi, I would like to change the color and make it translucent of the container, my site is https://cheesecakebased.com/,

Thank you!

0000.png
0000.png817×405 163 KB

2

@SupGold96 add below css into base.css file

.banner__box {
    max-width: 90rem;
    background-color: rgba(255, 255, 255, 0.18) !important;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

Ujjaval_0-1685546594289.png
Ujjaval_0-1685546594289.png1587×789 197 KB

1 Like
3

Hi @SupGold96 ,

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-1685546899713.png
PageFlyHenry_0-1685546899713.png1600×794 139 KB

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

Hope this answer helps.

Best regards,

Henry | PageFly

1 Like
4

thank you so much for the detail answer!

5

thank you so much for the answer!

6

Hi, is it possible for mobile to be the same too? because its only showing on website.

7

Yes this code will work on device-wide

8

Hi, it is not showing up on my mobile website.. how can i make it same as the website?

9

Thank you so much for this, is there a way to change the opacity to make it slightly more opaque?