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

335 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

283 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
319 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!

287 Views
0 Likes
Report
LitExtension
Shopify Partner
4859 1001 1099
‎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
298 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

 

284 Views
0 Likes
Report
In response to betbuech
LitExtension
Shopify Partner
4859 1001 1099
‎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
271 Views
0 Likes
Report
Community Browser

Community Blog Articles

cropped-shutterstock_1498591895.webp
The 30-30-30 Rule: A Balanced Approach to Social Media for Startups

Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...

By Trevor Sep 20, 2023
cropped-shutterstock_1913321758.webp
How To Gain Customer Trust With Your Store’s Footer

Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...

By Skye Sep 15, 2023
shutterstock_2183225521_16x9.png
Who Are Shopify Partners?

In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...

By Imogen Sep 13, 2023
Terms of Service Privacy Policy