CSS Background image

Razzo_Sky
New Member
1 0 0

Hi!  New to liquid and I am trying to figure out how to set the background image from the settings.section.image in the css.   I am just missing it though.  Any pointer in the right direction would be great.  Thanks!

As a sample:

<div class="uns_hero_static">
  <h1>{{section.settings.uns_text_line}}</h1>
</div>

{% schema %}
{
  "name": "Hero",
  "settings": [
    {
      "id": "image",
      "type": "image_picker",
      "label": "Background Image"
    },
    {
      "id": "uns_text_line",
      "type": "text",
      "label": "Header Text",
	  "default": "Snappy words here!"
    }
  ],
  "presets": [
    {
      "name": "Hero Static Image",
      "category": "Hero"
    }
  ]
}

CSS:

.uns_hero_static {
  	display: flex;
	width:100%;
	height: 600px;
	background-image: url({{ section.settings.image | image_url }});
	background-repeat: no-repeat;
        background-size: cover;
}

 

0 Likes
letreb
Tourist
7 0 2

Also trying to figure this out.

0 Likes
Sellfino
Shopify Partner
33 1 13

Where is your CSS? Inside the section? No settings of sections can be exported to external files (like style.css or other liquid files)

Open Source Shopify App Store - https://github.com/sellfino/sellfino
Free apps ready to download on GitHub

Join our awesome community! Here is how you can connect with us:
Website - all info here + live chat
Discord - channels to discuss new ideas and ask for help
Messanger - if you want to chat on Facebook
Email - whenever we are out of touch, drop us a message
0 Likes
letreb
Tourist
7 0 2

Thanks for your reply. I solved the issue by adding this to my html element: 

style="background-image:url('{{ section.settings.bg-image.src | img_url: 'large' }}')"​​​​​​
AvidBrio
Shopify Expert
144 7 12

you can add the style tag into section starting 

 

<style>

.section-top-banner {
  	display: flex;
	 
 	background-image: url({{ section.settings.bgimg | image_url }}); 
	background-repeat: no-repeat;
        background-size: cover;
        margin: 0;
    height: 350px;
    align-items: center;
    justify-content: center;
    color: #fff;
}
</style>

 

you can use section value everywhere this is the easiest way to access " {{ }}  you can access those section value into style style

background-image: url({{ section.settings.bgimg | image_url }})







If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes