Change background image with Metafields (Boundless theme)

Highlighted
Tourist
17 0 1

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!

0 Likes
Highlighted
body {
 background-image: url("paper.gif");
 background-color: #cccccc;
}

Hi,

Try to add like this !

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes