Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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
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 %}">
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!
Hello ChoosiZon
Thanks for your reply, but this does'nt work either!
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
Hi @betbuech,
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
User | RANK |
---|---|
177 | |
154 | |
72 | |
46 | |
36 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023