title: Placing an image behind a border and 2 vertical lines
body: <p>What I want to do is to place an image behind a border and 2 vertical lines. I was thinking the vertical lines could be SVG, but I'm not sure how to set this up.</p>
  
  <p><a href="https://jsfiddle.net/q5xnxqkk/" rel="nofollow noreferrer">https://jsfiddle.net/q5xnxqkk/</a></p>
  
  <pre><code>&lt;svg style="background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );border: 3px solid #0059dd;padding: 62px 100px 62px 100px;  cursor: pointer;background-color:black;"
    width="60" height="72" viewBox="0 0 60 72"&gt;
      &lt;path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"&gt;&lt;/path&gt;
      &lt;path d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"
      fill="#E6DC00"&gt;&lt;/path&gt;
      &lt;path fill="#E6DC00 " d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" /&gt;&lt;/path&gt;
    &lt;/svg&gt;
  </code></pre>