Dawn theme - Image Banner - making the text box more transparent

[Myellagroup]

Hi All,

Wondering if anyone knows how to make the black text box on my Image Banner less opaque/more transparent. I would like the background image to be partially visible without compromising the legibility of the white text in the text box. 

Preview: https://eaoz1b83k81muggb-15517073.shopifypreview.com

Thank you!

[Ecommpremium]

hi @Myellagroup go to edit theme and open base.css and paste this line in the bottom!

.banner__box {
opacity: 0.5;
}

[Myellagroup]

Hi @Ecommpremium @Nick_Marketing 

Both worked!

However, when I try to decrease the opacity to 0.3 or 30%, the opacity of the text decreases too making it hard to read. So, is there a way just to reduce box opacity without affecting the text?

Also, in a different scenario, is there a way to make the text black, if I completely get rid of the text box? 🙂

Thanks!

[Nick_Marketing · Accepted solution]

Here is a workaround of decreasing opacity to a minimum, while keeping the text relatively visible. To change background opacity, adjust the current background value of '0.2'

.banner__box.color-inverse {
    opacity: unset;
    background: rgba(60, 60, 60, 0.2);
}

.banner__box.color-inverse .banner__heading.h0, .banner__text, .button.button--secondary{
    color: #fff;
}

[Myellagroup]

Hi @Nick_Marketing 

Thanks!

Could you also help me out with changing the text colour into black please?

Thanks

[mktaha]

It's important to mention that you ALSO have to set the "Color scheme" in the image banner configuration to "Inverse" for this to work..

[Myellagroup]

@mktaha

okay thanks!

[brendanwalsh]

This worked perfectly for me but how do you make it so the text is still on the photo when on a mobile device?

[Nick_Marketing]

Try adding this code to the bottom of base.css. You can adjust the opacity values to your preference.

.banner__box.color-inverse {
  opacity: 70%;
}