title: Getting an unknown space in between various images added together
body: <p>I need to have text displayed in a transparent image that resembles like an area painted using paint brush. So I cut the edges and have 8 in all,
  top left, top middle, top right
  left
  right
  bottom left, bottom middle, bottom right</p>
  
  <p>And text coming in between. Can someone suggest what I'm missing here?</p>
  
  <p>Attached screenshot for the reference. Notice the white line around the text.<a href="https://i.stack.imgur.com/NctBC.png" rel="nofollow noreferrer"><a href="https://i.stack.imgur.com/NctBC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NctBC.png" alt="screenshot"></a></a></p>
  
  <p>Adding HTML code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Banner Test&lt;/title&gt;
          &lt;style&gt;
              
              .banner-content {
                position: absolute;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 70%;
                left:50%;
              }
              .banner-content .top {
                background-image: url("img/Paintstrip-subhead_topmiddle.png");
                background-position: top center;
                background-repeat: repeat-x;
                min-height: 21px;
                position: relative;
                top: 0;
                float: left;
                width: 100%;
                display: block;
              }
              .banner-content .top:before {
                background-image: url("img/Paintstrip-subhead_topleft.png");
                background-position: top left;
                left: -50px;
                background-repeat: no-repeat;
                content: '';
                position: absolute;
                top: 0;
                width: 50px;
                height: 100%;
              }
              .banner-content .top:after {
                background-image: url("img/Paintstrip-subhead_topright.png");
                background-position: top right;
                right: -50px;
                background-repeat: no-repeat;
                content: '';
                position: absolute;
                top: 0;
                width: 50px;
                height: 100%;
              }
              .banner-content .middle {
                position: relative;
                background-color: rgba(137, 38, 120, 0.85);
                float: left;
                width: 100%;
                display: block;
                text-align: center;
                color: #fff;
              }
              .banner-content .middle h1 {
                  font-size: 35px;
              }
              .banner-content .middle::before {
                background-image: url("img/Paintstrip-subhead_leftmid1.png");
                left: -50px;
                background-repeat: no-repeat;
                content: '';
                position: absolute;
                top: 0;
                width: 50px;
                height: 100%;
                background-repeat: repeat-y;
                background-position: left center;
              }
              .banner-content .middle::after {
                background-image: url("img/Paintstrip-subhead_rightmid1.png");
                right: -50px;
                background-repeat: no-repeat;
                content: '';
                position: absolute;
                top: 0;
                width: 50px;
                height: 100%;
                background-repeat: repeat-y;
                background-position: right center;
              }
              .banner-content .bottom {
                background-image: url("img/Paintstrip-subhead_bottom1.png");
                background-position: bottom center;
                background-repeat: repeat-x;
                min-height: 31px;
                position: relative;
                z-index: -1;
                top: 0;
                float: left;
                width: 100%;
                display: block;
              }
              .banner-content .bottom:before {
                background-image: url("img/Paintstrip-subhead_bottomleft.png");
                background-position: bottom left;
                left: -50px;
                background-repeat: no-repeat;
                content: '';
                position: absolute;
                top: 0;
                width: 50px;
                height: 100%;
              }
              .banner-content .bottom:after {
                background-image: url("img/Paintstrip-subhead_bottomright.png");
                background-position: bottom right;
                right: -50px;
                background-repeat: no-repeat;
                content: '';
                position: absolute;
                top: 0;
                width: 50px;
                height: 100%;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;section class="banner-content"&gt;
              &lt;div class="top"&gt;&lt;/div&gt;
              &lt;div class="middle"&gt;
                  &lt;h1&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="bottom"&gt;&lt;/div&gt;
          &lt;/section&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>