Creating background image from Schema settings

hwb_Creative_Co
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?

Replies 12 (12)

justenphelps
Shopify Partner
6 0 1

Would love to know this as well!

Aravindan
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

ashlinixon
Shopify Partner
1 0 1

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
Shopify Partner
4 0 1

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

Saima-Babar
Shopify Partner
3 0 0

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

 

TQ34
Shopify Partner
2 0 0

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
Visitor
1 0 0

Great Help!

dev22
Shopify Partner
33 1 10

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
Shopify Partner
33 1 10

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
Shopify Partner
3 0 0

you can use inline style like so : 

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

techlyser_web
Shopify Partner
1363 254 264

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;

}

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

TQ34
Shopify Partner
2 0 0