Changing single background images on pages in Story Theme

Store Design
1

Hi there

I have tried to change my background images for each page in the STORY Theme.

First I have added the following code on theme.css

body.background-region { background-image: url(“https://cdn.shopify.com/s/files/1/0609/2813/1331/files/Vineyward_with_Alistair_close_cut_3.jpg?v=1637115856”);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;
}

body.background-making { background-image: url(“https://cdn.shopify.com/s/files/1/0609/2813/1331/files/back_winemaking.jpg?v=1637456470”);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover;
}

Then I made the following changes in theme.liquid:

Unfortunately this does not work in the Story-theme anymore, but it worked in the Debut-Theme before.

Your help would be very appreciated.

Thanks in advance

2

You can try this :
3

Hi @betbuech ,

Please add this code, it will work fine:

body.background-region .main-content, 
body.background-region .palette--dark, 
body.background-region .palette--light,
body.background-making .main-content, 
body.background-making .palette--dark, 
body.background-making .palette--light{
	background-color: transparent !important;
}

Hope it helps!

4

Hello ChoosiZon

Thanks for your reply, but this does’nt work either!

5

Hello LitExtension

Thanks for your reply and thank you so much, it works!

You saved my day

Greetings from

betbuech

6

Hi @betbuech ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.