Changing single background images on pages in Story Theme

betbuech · ‎11-29-2021

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:

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

betbuech · ‎11-30-2021

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

ChoosiZon · ‎11-29-2021

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 · ‎11-30-2021

Hello ChoosiZon

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

LitExtension · ‎11-30-2021

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
Contact us:
- Email: contact@litextension.com

betbuech · ‎11-30-2021