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

Changing single background images on pages in Story Theme

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

223 Views
0 Likes
Report
Accepted Solution (1)

Accepted Solutions
betbuech
Tourist
6 2 0
‎11-30-2021 05:11 PM

Re: Changing single background images on pages in Story Theme

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

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

Re: Changing single background images on pages in Story Theme

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
207 Views
0 Likes
Report
LitExtension
Shopify Partner
4859 998 1056
‎11-30-2021 06:06 AM

Re: Changing single background images on pages in Story Theme

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
186 Views
0 Likes
Report
betbuech
Tourist
6 2 0
‎11-30-2021 05:05 PM

Re: Changing single background images on pages in Story Theme

Hello ChoosiZon

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

175 Views
0 Likes
Report
betbuech
Tourist
6 2 0
‎11-30-2021 05:11 PM

Re: Changing single background images on pages in Story Theme

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

 

172 Views
0 Likes
Report
LitExtension
Shopify Partner
4859 998 1056
‎12-01-2021 03:13 AM

Re: Changing single background images on pages in Story Theme

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
159 Views
0 Likes
Report

Community Blog Articles

E23_social share_1200x6751.jpg
Shopify Community AMA: Winter Editions ‘23 Recap

Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...

By Jacqui Mar 10, 2023
shopify-academy-foundations-certification-16-9-v1-size.png
Introducing Shopify Certifications

Upskill and stand out with the new Shopify Foundations Certification program

By SarahF_Shopify Mar 6, 2023
notebook-and-coffee.jpg
Adding and Creating Store Policies

One of the key components to running a successful online business is having clear and co...

By Ollie Mar 6, 2023
Terms of Service Privacy Policy