Solved

Banners and banner color disappeared after adding background.

poe1
Excursionist
21 0 4

I've added a background to my shop, but two of my banners disappeared and the text is not visible anymore. How can I add the background without changing the banners?

URL: cutegemz.com pasw: neatyou

 

Bildschirmfoto 2024-05-08 um 20.11.18.pngBildschirmfoto 2024-05-08 um 20.11.10.png

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
6035 1449 1787

This is an accepted solution.

Can you replace on this one. Let see if it work. 

 

.gradient:not(.utility-bar) {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(/cdn/shop/files/CuteGemz_Background-1.png?v=1715190770);
    background-color: transparent;
    background-position: top left !important;
    background-size: auto !important;
}

 

And Save. 

Result:

Made4uoRibe_0-1715203410679.png

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
6035 1449 1787

Hi @poe1 

Do you mean the header? you used the wrong selector. If you only want the body not the whole page. 

Try to code to this. 

 

main#MainContent {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(https://cdn.shopify.com/s/files/1/0814/4705/9799/files/CuteGemz_Background-1.png?v=1715190770) !important;
    background-position: top left !important;
    background-size: auto !important;
} 

 

And save. 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


poe1
Excursionist
21 0 4

Unfortunately it didn't work. I'd like to add the following background to my page and want to keep the header with the two pink stripes at the same time. I've added the background to this reply.

CuteGemz Background-1.png

Made4uo-Ribe
Shopify Partner
6035 1449 1787

This is an accepted solution.

Can you replace on this one. Let see if it work. 

 

.gradient:not(.utility-bar) {
    background: var(--gradient-background);
    background-attachment: fixed;
    background-image: url(/cdn/shop/files/CuteGemz_Background-1.png?v=1715190770);
    background-color: transparent;
    background-position: top left !important;
    background-size: auto !important;
}

 

And Save. 

Result:

Made4uoRibe_0-1715203410679.png

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


poe1
Excursionist
21 0 4

Thanks!

poe1
Excursionist
21 0 4

Hey, somehow it doesn't work anymore. 😕