Creating background image from Schema settings

[hwb_Creative_Co]

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?

[justenphelps]

Would love to know this as well!

[Aravindan]

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

[ashlinixon]

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' }}');

[PatriciaHung]

#bg-image {
     background-image:url('{{ section.settings.bg-image.src | img_url: 'master' }}');
     background-size: cover;
}

[Saima-Babar]

if it doesn't work. Then Add inline-css.. 

[TQ34]

background-image: url("//www.le-chanel.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244...");

 i have added all of your code and try it one by one but background image is not being changed

[jis0324]

Great Help!

[dev22]

Can you please point me out the structure of how this looks?

I gave my 

<div class="page-width">

an id of bg-image

then, I did this in the schema:

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

and, in the style area:

{% stylesheet %}
#bg-image {
     background-image:url('{{ section.settings.bg-image.src | img_url: 'master' }}');
     background-size: cover;
}
{% endstylesheet %}

This doesn't quite display the background image, though. It gives me in the css, looking at it with Chrome dev tools:

background-image: url("{{ section.settings.bg-image.src | img_url: "master" }}")

And this is crossed off with a strikethrough, as being invalid.

So where do you add the style? What am I doing wrong?

Thanks!

[dev22]

Answering my own issue, figured it out!

Instead of putting the style in the {% stylesheet %} tag, I put it into <style> tags. This worked.

I would've liked for it to go straight on my css style sheet, but that just didn't work. Don't know why.

[IsmailTalb]

you can use inline style like so : 

style="background-image: url({{ block.settings.slide_img_mob | img_url: 'medium' }})"

[GelSai]

Solved my problem! thank you

[Saima-Babar]

mine pleasure..

[niraj_patel]

hello @Raghav2

You can add code by following these steps to change ATC background color

 1. Go to Online Store -> Theme -> Edit code.
2. Open your liquid file

3. Your schema setting is right but for inline CSS you have to change code to below code
style="background-image:url('{{ section.settings.bg-image | img_url: ''}}')"

4. Add CSS

#bg-image{

     background-repeat: no-repeat;
     height: 500px;
    background-position: center;
    background-size: cover;
    width: 100%;

}
Note: Adjust height according to you.

5. By default the empty div show display none, if your image not showing, so you have to add one more css that is below

#bg-image{

    display:block !important;

}

[TQ34]

background-image: url("//www.le-chanel.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244...");