Creating background image from Schema settings

Store Design
1

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?

2

Would love to know this as well!

3

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

4

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

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

1 Like
6

Great Help!

7

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

I gave my

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!

8

Answering my own issue, figured it out!

Instead of putting the style in the {% stylesheet %} tag, I put it into 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.

9

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

10

you can use inline style like so :

style=“background-image: url({{ block.settings.slide_img_mob | img_url: ‘medium’ }})”

1 Like
11

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.

  1. 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;

}

12

background-image: url(“//www.le-chanel.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c.gif”);

13

background-image: url(“//www.le-chanel.com/cdn/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c.gif”);

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

14

Solved my problem! thank you

15

mine pleasure..