How can I change the transparency of my homepage image banner?

Store Design

Topic summary

A user wants to adjust the transparency of an image banner with text and buttons on their Shopify homepage.

Solution Provided:

  • Add CSS code to the theme’s stylesheet (theme.css or base.css):
    • .banner__box {background: rgba(22,22,22,0.8);} where the RGB values (22,22,22) control color and the final value (0.8) controls opacity
    • Alternative selector: .banner__media {background: rgba(11,11,11,0.1);}

Follow-up Questions:

  • One user cannot locate theme.css in their code (advised to check for base.css instead)
  • Another asks how to reduce the container size (unanswered)
  • A third wants to change the color to creamy white (directed to use an online color picker tool to convert desired colors to RGBA format)

The original issue was resolved successfully with the CSS solution.

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

Hello! I’m editing my shop and I’ve got a short simple question.

I have an image banner with text and buttons on my home page. Want to make it transparent or just be able to change the transparency settings. How can I do that thing?

Screenshot 2022-09-27 at 15.47.03.png
Screenshot 2022-09-27 at 15.47.03.png1926×930 92.3 KB

Thank you very much for your help!

The website is: https://project-avignon.myshopify.com/

Password: meolyo

2 Likes
2

Hi,

please add below CSS in theme.css

.banner__box {background: rgba(22,22,22,0.8);}

22,22,22 is color code

3 Likes
3

Thank you very much, Hari, you really helped me! This solution works perfectly.

Have a wonderful day!

2 Likes
4

I have the same issue but I can’t find the theme.ccs in my code.

5

could also be

.banner__media {background: rgba( 11,11,11,0.1);}
6

Goodday that worked but how do I make the container smaller?

7

How do i change the color to a creamy white?

8

Hi @jaelahstanley ,

You can paste your Color code at below URL this will provide the HEX code with opacity to include in CSS.

https://imagecolorpicker.com/color-code/190066

9

Hi @Spare1 ,

In that case you might have base.css file