<div class="wrapper">
  <span>Has spacing issue</span>
</div>
<div class="wrapper js-fix">
  <span>No spacing issue</span>
</div>
.wrapper {
  display: inline-block;
  width: 600px;
  height: 200px;
  background: red;
  
  /* The cause of problem*/
  background-size:14.285714286% 70px; /* repeat 7 times horizontally */  

  /*Free Chevron Pattern SVG provided by SVGeez.com - CC 4.0 License - © 2019 Megan Young */
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' fill-opacity='1' style='enable-background:new 0 0 500 500'%3E%3Cstyle%3E .st1{fill:rgb(82, 230, 227)} %3C/style%3E%3Cpath style='fill:none;stroke:rgba(255,255,255,1);stroke-width:50;stroke-miterlimit:10' d='M-44-184l83 92 83-92 83 92 83-92 83 92 83-92 83 92 83-92'/%3E%3Cpath class='st1' d='M.8 500L-101 387.4l37.2-33.5L.8 425.4l83.1-92 83.2 92 83.2-92 83.1 92 83.2-92 83.2 92 64.6-71.5 37.2 33.5L499.8 500l-83.2-92-83.2 92-83.1-92-83.2 92-83.2-92zM.8 333.3L-101 220.7l37.2-33.4L.8 258.7l83.1-92 83.2 92 83.2-92 83.1 92 83.2-92 83.2 92 64.6-71.4 37.2 33.4-101.8 112.6-83.2-92-83.2 92-83.1-92-83.2 92-83.2-92zM.8 166.6L-101 54.1l37.2-33.5L.8 92 83.9 0l83.2 92 83.2-92 83.1 92 83.2-92 83.2 92 64.6-71.4 37.2 33.5-101.8 112.5-83.2-92-83.2 92-83.1-92-83.2 92-83.2-92z'/%3E%3C/svg%3E");  
}

.wrapper span {
  background: white;
  padding: 10px;
  margin: 10px;
  font-size: 30px;
  font-weight: bold;
  color: purple;  
}
(function($) {
  // Document has to be ready first so it has actual dimension applied
  $(document).ready(function() {
    // Let's fix only one of them for comparison
    const $wrapper       = $('.js-fix');
    
    const wrapperWidth   = parseInt($wrapper.outerWidth());
    
    // Get applied background-size CSS value, split it into array
    const backgroundSize = $wrapper.css('backgroundSize').split(' ');    
    const sizeHorizontal = backgroundSize[0];
    const sizeVertical   = backgroundSize[1];
    
    // Get the horizontal size in pixel
    const fixedSizeHorizontal = (parseFloat(wrapperWidth) / 100) * parseFloat(sizeHorizontal);
      
    // Remove decimal value by converting it into integer
    // Use ES6 format for clarity
    // sizeVertical isn't modified in anyway so simply re-add it as is; this snippet
    // assumes the issue only appears on horizontal repeat
    $wrapper.css('backgroundSize', `${parseInt(fixedSizeHorizontal)}px ${sizeVertical}`)
  });  
})(jQuery);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js