JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
<div class="row1">
<div class="col1">
Col1
</div>
<div class="col2">
Col2
</div>
</div>
<div class="row2">
<div class="col1">
Col1
</div>
<div class="col2">
Col2
</div>
</div>
<div class="row3">
<div class="col1">
Col1
</div>
<div class="col2">
Col2
</div>
</div>
</div>

CSS

.main
{
	min-height: 1000px;
  width: 500px;
  margin: 0 auto;
  
}

.col1
{
	width: 150px;
  min-height: 800px;
  display: inline-block;
  float: left;
}

.col2
{
  width: 70%;
  min-height: 800px;
  display: inline-block;
}

.row1 .col1
{
  background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/24-hours-phone-icon.png") !important;
    //background-position: left !important;
    background-repeat: no-repeat !important;
    background-size: 100px 100px !important;
    background-attachment: fixed !important;
}

.row2 .col1
{
    background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/abs-icon.png") !important;
    background-position: left !important;
    background-repeat: no-repeat !important;
    background-size: 100px 100px !important;
    background-attachment: fixed !important;
}

.row3 .col1
{
    background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-down-icon.png") !important;
    background-position: left !important;
    background-repeat: no-repeat !important;
    background-size: 100px 100px !important;
    background-attachment: fixed !important;
}

JavaScript

jQuery(document).ready(function(){
  backgroundImageSize = 100;
  
  elem = jQuery(".row1 .col1, .row2 .col1, .row3 .col1"); 
  for(ind = 0; ind < 3; ind++) {
    elem[ind].getBoundingClientRect();
   
      elem[ind].style.setProperty('background-position', (elem[ind].getBoundingClientRect().left + jQuery(".col1").width() / 2 - (backgroundImageSize/2))+'px center', 'important');
  }

  var width = $(window).width();
  $(window).on('resize', function(){
     if($(this).width() != width){
        width = $(this).width();
        elem = jQuery(".row1 .col1, .row2 .col1, .row3 .col1"); 
        
        for(ind = 0; ind < 3; ind++) {
          elem[ind].getBoundingClientRect();
        	elem[ind].style.setProperty('background-position', (elem[ind].getBoundingClientRect().left + jQuery(".col1").width() / 2 - (backgroundImageSize/2))+'px center', 'important');
        }
     }
  });
});