title: Foundation 5 - make background-image fill entire column
body: <p>I'm trying to create the following effect with Zurb Foundation. Basically, two columns, each half the screen:</p>
  
  <pre><code>&lt;div class="small-6 columns"&gt;&lt;!-- MAKE IMAGE COVER HERE --&gt;&lt;/div&gt;
  &lt;div class="small-6 columns"&gt;
     &lt;h1&gt;title&lt;/h1&gt;
     &lt;p&gt;Content&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to achieve the following visual effect:</p>
  
  <p><img src="https://i.stack.imgur.com/53B32.jpg" alt="enter image description here"></p>
  
  <p>The problems I'm facing:</p>
  
  <ul>
  <li>If I just is an <code>&lt;img/&gt;</code> tag, it doesn't have the "cover" effect -- either the width or height is not fully covered.</li>
  <li>if I set <code>background-image:</code> to the <code>&lt;div class='small-6 columns'&gt;</code>, the image doesn't show up.</li>
  <li>the left/right padding on columns doesn't allow the image to entirely cover the container. However I'm hesitant to remove them as I dont want to break the responsive functionality of columns.</li>
  </ul>
  
  <p><strong>Current Code:</strong></p>
  
  <p><em>Markup</em>:</p>
  
  <pre><code>&lt;div class="small-12 medium-6 columns thumb-bg"&gt;&lt;/div&gt;
  &lt;div class="small-12 medium-6 columns&gt;
    &lt;h1&gt;title&lt;/h1&gt;
    &lt;p&gt;content&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>SCSS</em>:</p>
  
  <pre><code>  .thumb-bg {
      background-image: url('www.image-url.com');
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-color: #464646;
    }
  </code></pre>