FROM CACHE - en_header

Changing single background images on pages in Story Theme

Solved
betbuech
Tourist
6 2 0
‎11-29-2021 08:51 PM

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

377 Views
0 Likes
Report
Accepted Solution (1)
In response to LitExtension
betbuech
Tourist
6 2 0
‎11-30-2021 05:11 PM

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

325 Views
0 Likes
Report
Replies 5 (5)
ChoosiZon
Shopify Partner
416 66 110
‎11-29-2021 09:36 PM

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
361 Views
0 Likes
Report
In response to ChoosiZon
betbuech
Tourist
6 2 0
‎11-30-2021 05:05 PM

Hello ChoosiZon

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

329 Views
0 Likes
Report
LitExtension
Shopify Partner
4860 1001 1115
‎11-30-2021 06:06 AM

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
340 Views
0 Likes
Report
In response to LitExtension
betbuech
Tourist
6 2 0
‎11-30-2021 05:11 PM

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

 

326 Views
0 Likes
Report
In response to betbuech
LitExtension
Shopify Partner
4860 1001 1115
‎12-01-2021 03:13 AM

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
313 Views
0 Likes
Report
Community Browser

Community Blog Articles

cropped-SYSO-okt23-GROW.png
Unlocking the Secrets of E-commerce Success: An Exclusive Interview with SY...

On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...

By Arno Nov 27, 2023
cropped-shutterstock_offset_2207989361.jpg
Organize Your Products Like a Rainbow: Metafields and Color Sorting

You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...

By Skye Nov 8, 2023
Jasonh_0-1698862247798.png
Community Connect: October Recap

The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...

By Jasonh Nov 6, 2023
Terms of Service Privacy Policy