Adding Background Image to Images Grid Section

ehwilson00
Visitor
1 0 0

Okay coding wizards. I followed a tutorial to add the option for background images for other sections. In my case, the image grid section specifically. I got it working, but I cannot get the image to fill the entire section (it's locked to the content background, not the section background. See screenshot).

screenshot shopify.png



If anyone can find my mistake in the code, or know the workaround for this, I'd greatly appreciate it. 

Theme: Yuva

<div class="{% if section.settings.enable-background %}add-background-{{ section.id }} {% endif %}container sm-container">
  <div class="yv-images-grid-container {{ section.settings.content_position }}-content">

      <div class="yv-images-grid-content-wrapper">
        <div class="yv-images-grid-content">
          {% if section.settings.heading != blank %}
            <{{ section.settings.seo_heading }} class="{{ section.settings.heading_size }} yv-images-grid-content-heading">{{ section.settings.heading }}</{{ section.settings.seo_heading }}>
          {% endif %}
          {% if section.settings.description != blank %}
            <div class="yv-images-grid-content-text">
              {{ section.settings.description }}
            </div>
          {% endif %}
          {% if section.settings.btn_text != blank and section.settings.btn_link != blank %}
            <div class="yv-images-grid-buttons">
              <a
                class="{% if section.settings.btn_as_link == true  %}link{% else %}button small-btn m-small-btn{% endif %}"
                href="{{ section.settings.btn_link }}"
              >
                {{ section.settings.btn_text }}
              </a>
            </div>
          {% endif %}
        </div>
      </div>
    <div class="yv-images-grid-image-wrapper">
      <div class="yv-images-grid-image-body" style="padding-bottom:{{ section.settings.image_height }}%">
        <div class="yv-images-grid-image-list with-3-items">
          {% for block in section.blocks %}
            <div class="yv-images-grid-image-list-item">
              <div class="image-wrapper" style="padding-bottom:{{ section.settings.image_height }}%">
                {% if block.settings.image != blank %}
                  {% render 'lazy-image', image: block.settings.image %}
                {% else %}
                  {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
                {% endif %}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
    
  </div>
</div>
<style>
  {% if section.settings.enable-background %}
    .add-background-{{ section.id }}{
      background-image: url({{ section.settings.enable-background-image | img_url: 'master' | width: 1440, height: 600 }});
        background-size: cover;
        background-position: center center;
        background-attachment: local;
    }
  {% endif %}
  #shopify-section-{{ section.id }}.shopify-section {
    background:var(--{{- section.settings.bgcolor -}}ColorBody);
    padding-top:{{ section.settings.top_space_desktop }}px;
    padding-bottom:{{ section.settings.bottom_space_desktop }}px;
     {%- unless section.settings.bgcolor == 'primary' or section.settings.bgcolor == 'gradient' -%}
    --colorTextBody:var(--{{- section.settings.bgcolor -}}colorTextBody);
    --heading_color:var(--{{- section.settings.bgcolor -}}_heading_color);
    --primaryColorBody:var(--{{- section.settings.bgcolor -}}ColorBody);
    --colorLightTextBody:var(--{{- section.settings.bgcolor -}}ColorLightTextBody);
    --colorXlightTextBody:var(--{{- section.settings.bgcolor -}}ColorXlightTextBody);
    {%- endunless -%}
  }
  @media only screen and (max-width:991px) {
    #shopify-section-{{ section.id }}.shopify-section{
      padding-top:{{ section.settings.top_space_mobile }}px;
      padding-bottom:{{ section.settings.bottom_space_mobile }}px;
    }
  }
  {% if section.settings.section_visibility == 'large' %}
      @media (max-width: 767px) {
        #shopify-section-{{ section.id }}{
          display: none !important;
        }
      }
    {% elsif section.settings.section_visibility == 'small' %}
      @media (min-width: 768px) {
        #shopify-section-{{ section.id }}{
          display: none !important;
        }
      }
  {% endif %}
</style>
{% schema %}
{
  "name": "t:sections.image-grid.name",
  "tag": "section",
  "class": "yv-images-grid-section",
  "settings": [
     {
      "type":"checkbox",
      "id":"enable-background",
      "label": "Enable Background Image"
      },
    {
      "type":"image_picker",
      "id":"enable-background-image",
      "label": "Select Background Image"
      },
      {
      "type": "select",
      "id": "content_position",
      "label": "t:sections.image-grid.settings.content_position.label",
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-grid.settings.content_position.options.left.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-grid.settings.content_position.options.right.label"
        }
      ]
    },
     {
      "type": "select",
      "id": "image_height",
      "label": "t:sections.image-grid.settings.height.label",
      "default": "130",
      "options": [
        {
          "value": "70",
          "label": "t:common.image_height.options.landscape.label"
        },
        {
          "value": "130",
          "label": "t:common.image_height.options.portrait.label"
        },
        {
          "value": "100",
          "label": "t:common.image_height.options.square.label"
        }
      ]
    },
    {
      "type": "text",
      "label": "t:sections.image-grid.settings.heading.label",
      "id": "heading",
      "default": "Heading"
    },
    {
          "type": "select",
          "id": "seo_heading",
          "label": "t:common.header.heading_tag.label",
          "info": "t:common.header.heading_tag.info",
          "default": "h2",
          "options": [
            {
              "value": "h1",
              "label": "t:common.header.heading_tag.options.h1.label"
            },
            {
              "value": "h2",
              "label": "t:common.header.heading_tag.options.h2.label"
            },
            {
              "value": "h3",
              "label": "t:common.header.heading_tag.options.h3.label"
            },
            {
              "value": "h4",
              "label": "t:common.header.heading_tag.options.h4.label"
            },
            {
              "value": "h5",
              "label": "t:common.header.heading_tag.options.h5.label"
            },
            {
              "value": "h6",
              "label": "t:common.header.heading_tag.options.h6.label"
            }
          ]
      },
    {
      "type": "select",
      "id": "heading_size",
      "default": "h2",
      "label": "t:common.heading_size.label",
      "options": [
        {
          "value": "h5",
          "label": "t:common.heading_size.options.small.label"
        },
        {
          "value": "h4",
          "label": "t:common.heading_size.options.medium.label"
        },
        {
          "value": "h2",
          "label": "t:common.heading_size.options.large.label"
        }
      ]
    },
    {
      "type": "richtext",
      "label": "t:sections.image-grid.settings.description.label",
      "id": "description",
      "default": "<p>To provide clients insight into your brand, pair words with any image. Here you can tell a narrative, explain a product feature, or introduce a new campaign.</p>"
    },
    {
      "type":"header",
      "content":"t:common.header.button_section.label"
    },
    {
      "type":"checkbox",
      "id":"btn_as_link",
      "default": false,
      "label": "t:sections.image-grid.settings.btn_as_link.label"
    },
    {
        "type": "text",
        "id": "btn_text",
        "default": "Button text",
        "label": "t:sections.image-grid.settings.text.label"
    },
    {
      "type": "url",
      "id": "btn_link",
      "label": "t:sections.image-grid.settings.btn_link.label"
    },
    {
      "type": "header",
      "content": "t:common.header.color_section.label"
    },
    {
      "type": "select",
      "id": "bgcolor",
      "label": "t:common.header.background_section.label",
      "default": "primary",
      "options": [
        {
          "value": "primary",
          "label": "t:common.header.primary.label"
        },
        {
          "value": "secondary",
          "label": "t:common.header.secondary.label"
        },
        {
          "value": "tertiary",
          "label": "t:common.header.tertiary.label"
        },
        {
          "value": "quaternary",
          "label": "t:common.header.quaternary.label"
        },
        {
          "value": "gradient",
          "label": "t:common.header.gradient.label"
        }
      ]
    },
    {
      "type": "select",
      "id": "section_visibility",
      "label": "t:common.section_visibility.label",
      "default": "always",
      "options": [
        {
          "label": "t:common.section_visibility.options.always.label",
          "value": "always"
        },
        {
          "label": "t:common.section_visibility.options.small_devices.label",
          "value": "small"
        },
        {
          "label": "t:common.section_visibility.options.large_devices.label",
          "value": "large"
        }
      ]
    },
    {
      "type": "header",
      "content": "t:common.header.space_section.label"
    },
    {
      "type": "range",
      "id": "top_space_desktop",
      "label": "t:common.top_space_desktop.label",
      "default": 30,
      "min": 0,
      "max": 100,
      "step": 5
    },
    {
      "type": "range",
      "id": "bottom_space_desktop",
      "label": "t:common.bottom_space_desktop.label",
      "default": 0,
      "min": 0,
      "max": 100,
      "step": 5
    },
    {
      "type": "range",
      "id": "top_space_mobile",
      "label": "t:common.top_space_mobile.label",
      "default": 30,
      "min": 0,
      "max": 100,
      "step": 5
    },
    {
      "type": "range",
      "id": "bottom_space_mobile",
      "label": "t:common.bottom_space_mobile.label",
      "default": 30,
      "min": 0,
      "max": 100,
      "step": 5
    }

  ],
    "blocks": [
     {
        "type": "image",
        "name": "t:sections.image-grid.blocks.name",
        "limit": 3,
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "t:sections.image-grid.blocks.settings.image.label"
          }
        ]
    }
    ],
  "presets": [
  {
      "name": "t:sections.image-grid.presets.name",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
  }
]
}
{% endschema %}

 

Replies 0 (0)