Shopify themes, liquid, logos, and UX
Hi,
I'm trying to implement a way to change my background image for specific pages without having it in the hard code. I want to use metafields to be able to change the color of that specific page.
Here's how I implemented the background image in the theme.scss.liquid in the first place (it works). In the theme.liquid I assigned the background-class to all of my page handles.
body.background-class { background-image: url({{ "https://cdn.shopify.com/s/xyz" }});
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-align: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
Now I tried to put in the metafields code like this which won't work:
body.background-class { background-image: url({{ "page.metafields.global.background" }} );
I tried multiple ways to code this but can't find a way to make the metafields code work within the url() brackets.
Thanks for your help! 🙂
Solved! Go to the solution
This is an accepted solution.
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
Hi,
Try to add like this !
This is an accepted solution.
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
Hi,
Try to add like this !
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024