Creating background image from Schema settings

Shopify Partner
1 0 0

I'd like to use the schema settings of a section to set a background image in CSS. I've created an image_picker in the schema, and am using an inline style to set the background image. How do If format the liquid code to add the image from the image_picker to the background-image style?

schema settings:

{
  "type": "image_picker",
  "id": "bg-image",
  "label": "Custom Background Image"
},

inline css: 

background-image:url('{{ section.settings.bg-image }}');

Above is what I was hoping would work (it didn't work). How can I get the background-image to populate with the image from the schema settings?

0 Likes
Shopify Partner
6 0 0

Would love to know this as well!

0 Likes
Shopify Partner
2 0 0

https://help.shopify.com/en/themes/development/sections#javascript-and-stylesheet-tags

You'll get answer here.. Just set background image in {% stylesheet %}
{% endstylesheet %}  inside the schema

0 Likes
Highlighted
New Member
1 0 0

This code works in a css.liquid file, where 'settingID' is the unique ID of your setting type attribute.

 

background: url('{{ settings.settingID | img_url: 'master' }}');
0 Likes