Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Make Text in picture banner transparent Dawn

Solved

Make Text in picture banner transparent Dawn

pascalvienna
New Member
4 0 0

Hey Guys!

 

can anyone tell me how to make the background (at the image-banner) of the text and button transparent?

I mean the white box around the text and SHOP ALL... in mobile version it is transparent but not desktop

PICTURE BELOW

Thank you for any help!

 

Greetings from Vienna! 🙂

Shopify help new.PNG

Accepted Solution (1)

Nick_Marketing
Shopify Partner
1487 336 465

This is an accepted solution.

@pascalvienna 

Try adding this code to the bottom of base.css

.banner__box.color-background-1 {
  background: transparent;
}

 

In case you want to change the color of text and button to a white color. Then also add this code

.banner__heading.h1 {
  color:#fff
}
.banner__buttons .button.button--primary {
  background:#fff;
  color:#000;
  box-shadow: none;
}


Result on the desktop if you add both codes

2021-12-16 11_10_19.png

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).

View solution in original post

Replies 3 (3)

Nick_Marketing
Shopify Partner
1487 336 465

This is an accepted solution.

@pascalvienna 

Try adding this code to the bottom of base.css

.banner__box.color-background-1 {
  background: transparent;
}

 

In case you want to change the color of text and button to a white color. Then also add this code

.banner__heading.h1 {
  color:#fff
}
.banner__buttons .button.button--primary {
  background:#fff;
  color:#000;
  box-shadow: none;
}


Result on the desktop if you add both codes

2021-12-16 11_10_19.png

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
pascalvienna
New Member
4 0 0

MANY THANKS TO YOU!

Nick_Marketing
Shopify Partner
1487 336 465

@pascalvienna 

I appreciate it. Thank you!

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).