I added a background image to the Dawn theme, but now my image banner is affected by it

[RainbowSweets]

Hello,

I'm trying to design a new website for our business, and added a background image to the Dawn theme. I have an image banner that looked fine before the background code was added to assets/base.css. After adding this snippet to the end of the code the text field in the image banner that was previously displayed with a transparent background, now picked up the website background. How to I get rid of it?

This is the code that was added to the assets/base.css file;

.gradient {
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0678/9208/4964/files/pink_yellow_Coming_Soon_retro_large_eba23ef8-...) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: cover !important;
}

Any input would be greatly appreciated. 

Regards,

Mira

[Sweans · Accepted solution]

Hi @RainbowSweets 

To make the banner content tranbsparent, you need to add another set of CSS code to you asset/baces.css.

This issue is caused because both the body and the banner text element has the same class.

To remove this conflict, add the following code below the custom background style you applied:

.banner__box.content-container.gradient {
    background: transparent !important;
    background-image: none !important;
}

NB: You might need to interchange the class name based on your theme version and section.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

[RainbowSweets]

Thank you for the help! It worked like a charm! 👌🏼