How do I make my image banner container transparent with my color theme & smaller?

Store Design
1

Hi I am trying to figure out how to make it so that my image banner container on mobile is the same transparency as my computer version. I also want my image banner to show the text on the image but make it so that my container is on the bottom center of the image and small so you can still see the image in the background. See image for reference.

Image 2-13-25 at 9.14 PM.jpeg
Image 2-13-25 at 9.14 PM.jpeg2880×1800 304 KB

2

website is wagzzpet.com

3

Please add this code to Custom CSS

@media (max-widt: 749px) {
. banner__box {
    background: rgba(255, 255, 255, 0.47);
    margin-top: 20px;
    margin-bottom: 20px;
}
}

Screenshot 2025-02-14 at 17.02.10.png
Screenshot 2025-02-14 at 17.02.10.png906×1382 175 KB

4

Hi @jaelahstanley

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

5

That did not work.

6

Is there anything else I could do to make this work?

7

This still isnt working I have a code already in custom css for computer screen so that it is transparent, should i delete that and replace with this?