Banners and banner color disappeared after adding background.

Solved

Banners and banner color disappeared after adding background.

poe1
Excursionist
29 0 5

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
10192 2418 3063

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
10192 2418 3063

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
poe1
Excursionist
29 0 5

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
10192 2418 3063

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
poe1
Excursionist
29 0 5

Thanks!

poe1
Excursionist
29 0 5

Hey, somehow it doesn't work anymore. 😕