Dawn Theme (14.0.0) - Image Banner Box (Transparent) and Text (Visible)

[erickah_thao]

Store address: animeemporium.net

PW: Test

Currently working on a shift with my store's website. I've been messing around with what css coding I could find to try and make the Image Banner Box be transparent and have the text to be VISIBLE and NOT transparent with the box. These are the codes I've found to work, but it makes the box and text both transparent when I need it to only be the box.

Code #1

.banner__box {
  opacity: 0.8; /* Adjust the value between 0 (fully transparent) and 1 (fully opaque) */
}

Code #2

.banner__box {
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the values for color and transparency */
}

Current code I'm using in my base.css is code #1. I've tried both and they've done what I've needed them to do for box transparency, but the text also becomes transparent and that's not what I've needed. Any extra coding or help would be greatly appreciated.

Something else to add regarding the "button". I haven't made it that far yet, but what kind of coding would need to be done in order for me to be able to adjust the opacity to be visible too. I've included a picture below to help what it looks like currently with the adjustments I'm using.

Here's a list of what I need:

• CSS Coding for Transparent Box (Banner Box)
• CSS Coding for Visible Test (Banner Box)
• CSS Coding for Visible Button (Banner Box)

[Made4uo-Ribe · Accepted solution]

Hi @erickah_thao 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient {
  background: transparent;
}

And Save. 

Result:

Note: Please, remove the opacity that you add. Thanks!

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[erickah_thao]

Thank you so much! It did match your result! Because of that and with the information I've found, I did only 1 minor adjustment with the rgba coding. I've included the whole code with my adjustment. I went from yours 0.5 to 0.0 and that gave me what I needed!

.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.0);
}

.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient {
  background: transparent;
}

[Made4uo-Ribe]

Good to hear that, would you mind to hit like also.Thanks!

[takeoverapparel]

Hello I'm trying to do the same thing for my store but I want my image banner button to be transparent like the outline and just the text to be white how can i do that?

[Made4uo-Ribe]

Hi @takeoverapparel 

Would you mind to share your store URL? Thanks!