title: Remove lines from image background
body: <p>I'm not the best in css, but when I have a div with a background image, and I overlay a svg that only has a border, the border lines are shown on some devices. It should look like this.<a href="https://i.stack.imgur.com/e0bnr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e0bnr.png" alt="How the content should look" /></a></p>
  <p>But when I load this on mobile view, the border lines are shown. How can i fix this?
  I've tried to add a padding, and tried to use an backgroud position offset, but that didn't work.</p>
  <p><a href="https://i.stack.imgur.com/hGaK6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hGaK6.png" alt="Content with the image borderes" /></a></p>
  <pre class="lang-css prettyprint-override"><code>    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        background-origin: content-box;
      }
  
      body {
        margin: 0;
        font-family: Ubuntu;
        overflow: hidden;
        /* Hide scrollbars */
      }
  
      .container {
        margin: auto;
      }
  
      .column.left {
        margin: 0;
        float: left;
      }
  
      .column.right {
        float: right;
      }
  
  
      /* Clear floats after the columns */
  
      .item {
        display: block;
        overflow: hidden;
        position: relative;
        background-size: cover;
        background-position: left top;
        background-origin: content-box;
        background-repeat: no-repeat;
        /*border-radius: .9rem .9rem 0 .9rem;*/
      }
  
      .item h2 {
        font-family: Ubuntu, sans-serif;
        text-shadow: 0 0 3px rgba(0, 0, 0, .8);
        background: -webkit-linear-gradient(top, transparent 0%, #000000);
        background: linear-gradient(180deg, transparent 0%, #000000);
        bottom: 0;
        color: #fff;
        font-weight: normal;
        left: 0;
        margin: 0;
        position: absolute;
        right: 0;
      }
  
      .item1 img,
      .item2 img,
      .item3 img {
        width: 100%;
        height: auto;
      }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;content&quot;&gt;
          &lt;div class=&quot;overzicht&quot;&gt;
              &lt;div class=&quot;column left&quot;&gt;
                  &lt;div class=&quot;item item1&quot; style=&quot;background-image: url('https://i.regiogroei.cloud/552x310/43692b31-6c5e-3c1c-9734-0fda6b587107.jpg'); background-size: cover; background-position: center&quot;&gt;
                      &lt;img src=&quot;./StoreplayNEWS_Tekengebied 1.svg&quot; style=&quot;position: absolute; z-index: 5; width: 100%; height:100%&quot; alt=&quot;&quot;&gt;
                      &lt;h2 class=&quot;title&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt sed justo sit amet rhoncus&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;column right&quot;&gt;
                  &lt;div class=&quot;item item2&quot; style=&quot;background-image: url('https://i.regiogroei.cloud/552x310/13650346-f88e-3b81-b54a-af81dccd4369.jpg'); background-size: cover; background-position: center&quot;&gt;
                      &lt;img src=&quot;./StoreplayNEWS_Tekengebied 1.svg&quot; style=&quot;position: absolute; z-index: 5; width: 100%; height:100%&quot; alt=&quot;&quot;&gt;
                      &lt;h2 class=&quot;title&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt sed justo sit amet rhoncus&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;item item3&quot; style=&quot;background-image: url('https://i.regiogroei.cloud/552x310/ee982215-e923-3ea5-b65f-2230e1d36fad.jpg'); background-size: cover; background-position: center&quot;&gt;
                      &lt;img src=&quot;./StoreplayNEWS_Tekengebied 1.svg&quot; style=&quot;position: absolute; z-index: 5; width: 100%; height:100%&quot; alt=&quot;&quot;&gt;
                      &lt;h2 class=&quot;title&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt sed justo sit amet rhoncus&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Thanks in advance!</p>