Changing single background images on pages in Story Theme

Solved

Changing single background images on pages in Story Theme

betbuech
Tourist
6 2 0

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=163...");
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:

 

<body id="{{ page_title | handle }}" class="template-{{ template.name | handle }}
{% if page.handle == 'the-region' %}background-region{% endif %}
{% if page.handle == 'the-winemaking' %}background-making{% endif %}
{{ settings.decoration_style }} {{ settings.default_background }}" data-animations="{{ settings.animations_enable }}">

 

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

Accepted Solution (1)
betbuech
Tourist
6 2 0

This is an accepted solution.

Hello LitExtension

 

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

You saved my day

 

Greetings from

betbuech

 

View solution in original post

Replies 5 (5)

ChoosiZon
Shopify Partner
416 66 111

You can try this :

 

<body id="{{ page_title | handle }}" class="template-{{ template.name | handle }}
{{ settings.decoration_style }} {{ settings.default_background }}" data-animations="{{ settings.animations_enable }}
{% if page.handle == 'the-region' %}background-region{% endif %}
{% if page.handle == 'the-winemaking' %}background-making{% endif %}">
Donate
For faster response with a fee pls email to : choositech@outlook.com
betbuech
Tourist
6 2 0

Hello ChoosiZon

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

LitExtension
Shopify Partner
4860 1002 1151

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
betbuech
Tourist
6 2 0

This is an accepted solution.

Hello LitExtension

 

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

You saved my day

 

Greetings from

betbuech

 

LitExtension
Shopify Partner
4860 1002 1151

Hi @betbuech,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify