Multiple sections sharing same picture. Please help.

Solved
New Member
4 0 0

Created a dynamic section but when I add another another section they both share the same background picture. Is this an issue with my liquid code? Please help. Thank you.

 

Code below:

 

<div class='wrapper'>

<a href="{{ section.settings.btnlink1 }}" class='btn backerpic'>
<h2 id="sectiontitle">{{ section.settings.heading1 }}</h2>
</a>


</div>

<style>
.wrapper {
display: flex;
flex-direction: row;
height:500px;
margin-bottom:15px;
width:100vw;
}

.btn {
flex: 1 1 0;
display: flex;
justify-content: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.btn:hover {
opacity: .8;
transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
}

.backerpic{
background-image: url({{ section.settings.image | img_url:'2000x2000' }})
}

#sectiontitle{
position:absolute;
color: white;
font-family:karla, sans-serif;
font-size:36px;
align-self:top;
margin-top:180px;
font-weight:400;
z-index:1;
}

/* Responsive layout - makes text smaller when mobile scale */
@media screen and (max-width: 600px) {

#sectiontitle{
position:absolute;
color: white;
font-family:karla, sans-serif;
font-size:25px;
align-self:top;
margin-top:180px;
font-weight:400;
z-index:1;
}

</style>

{% schema %}
{
"name": "Image Button",
"settings": [

{
"id": "image",
"type": "image_picker",
"label": "Image"
},

{
"id": "heading1",
"type": "text",
"label": "Heading1",
"default": "Heading1"
},

{
"type": "url",
"id": "btnlink1",
"label": "Button link"
}
],


"presets": [
{
"name": "Image Button",
"category": "Image"
}
]

}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
```

0 Likes

Success.

Hello ,

Can you please share your site url

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
4 0 0

My site does not show this example live because the section is not working yet.

0 Likes

@mbonelli14,

You have to make schema for background image...

You added background image by using CSS that's why same image was applying to multiple section.

If you make schema for background Image then you can add multiple images from backend..

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
New Member
4 0 0

Anyway I can do this on the front end as I was using inline CSS. Any help is appreciated, I am new at coding.

 

Thank you.

 

Mike

0 Likes
New Member
4 0 0

I believe I have to make this into section block. How do I do this? 

0 Likes