Section works but when I add 2 or more sections the images chosen for each unique section seem to only chose one to display. I cannot make each section have a unique background picture. Please help.
Thank you.
<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 %}