This part contains steps about how to add background image to the Column of Grid. This case could be helpful if you need to fill with image all column height.

1.

  1. Will begin with adding CSS Class Name to the “Grid” element. For example, “grid-with-image”.
  1. The next step is to add CSS Class Name to the “Column” element, which contains image. For example, “image-center-column”.
  1. In the Story in Code Block next style snippet should be defined for the next CSS selectors:
    ".section.grid.grid-with-image .row" and “.section.grid.grid-with-image .row .col-sm-6”.
  <style>
    @media (min-width: 768px) and (max-width: 1366px) {
      .section.grid.grid-with-image .row,
      .section.grid.grid-with-image .row .col-sm-6 {
        display: flex;
      }
    }
  </style>
  1. The next step is to add script:
    *Notice that the second line of the script indicates the CSS Class Name you assigned to the column, that contains image. In this case it’s “image-center-column”.
  <script>

  if ((768 <= window.innerWidth) && (window.innerWidth <= 1366)) {
    var columns = document.getElementsByClassName("section grid-column image-center-column");
      [].forEach.call(columns, function(col){
        console.log(col);
        var images = col.getElementsByClassName("image scroll-to-center");
        var imageTag;
        
        col.getElementsByClassName("section-body")[0].style.visibility = "hidden";
        
        [].forEach.call(images, function(img){
          var image = img.getElementsByTagName("img");
          console.log(image[0].src);
          imageTag = image[0].src;
        });
        console.log(imageTag);
        col.style.backgroundImage = `url(${imageTag})`;
        col.style.backgroundRepeat = "no-repeat";
        col.style.backgroundPosition = "100% 50%";
        col.style.backgroundSize = "cover";
      });
  }

  </script>
  1. You can see the result.