title: Using CSS to Draw 3 Vertical Lines on and Image
body: <p>So I'm really new using CSS, I need to add 3 vertical red lines on top of and Image, the lines have to split the image in 4 equally sized parts. The size of the image is always 465*346 and the mark up I have so far looks like this</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.logo-container {
      position: relative;
      height: 87px;
      width: 35%;
      margin: 0 auto;
      min-width: 144px;
  }
  
  .logo {
      position: relative;
      width: 72px;
      height: 87px;
      z-index: 2;
  }
  
  .logo-line {
      position: relative;
      display: inline-block;
      top: -50%;
      width: 20%;
      height: 2px;
      background: #333;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="preview-image-wrapper"&gt;
     &lt;span class="firstOverlayLine" &gt;&lt;/span&gt;
     &lt;span class="secondOverlayLine"&gt;&lt;/span&gt;
     &lt;span class="thirdOverlayLine"&gt;&lt;/span&gt;
     &lt;img id="mainImage" type="image" class="mainimage" data-bind="attr: {src: SelectedImagePath}" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The above is my attempt to modify <a href="http://jsfiddle.net/AFBCC/2/" rel="nofollow noreferrer">this</a> example to make it fit my needs, but with no success so far, so I came here to see if anyone could help me out. </p>
  
  <p>The end result should look like:</p>
  
  <p><img src="https://i.stack.imgur.com/8jVwm.jpg" alt="Every part divided should be the same size"></p>
  
  <p>Thanks in advance for any help provided.</p>