title: Full width Background Image - Foundation
body: <p>I wish to achieve parts of my web page to have a background image that spreads the full with of the page, no white space at the edges. Is this possible? Im using foundation 5 framework. </p>
  
  <p>html</p>
  
  <pre><code>  &lt;div class="row"  id="wrapper"&gt;
      &lt;div class="large-12  columns"&gt;
        &lt;div class="kickstart"&gt;&lt;img src="img/kick-start.png"&gt;
          &lt;p class="getfit"&gt;&lt;img src="img/get-fit.png"&gt;&lt;/p&gt;
          &lt;p class="home-text"&gt; BodyMetrix Personal Training is a new company, based in South London, aiming to bring one-on-one training sessions and personalised exercise and nutrition plans. &lt;/p&gt;
          &lt;p class="get-contact"&gt;&lt;img src="img/get-contact-btn.png"&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#wrapper {
      background-image: url("../img/home-img.png");
      background-repeat: no-repeat;
      width: 100% !important;
      z-index: 0;
  
  
  }
  .kickstart {
  
      padding: 30px;
  }
  .getfit {
      padding-top: 10px;
  }
  
  .home-text {
      font-family: 'Open Sans', sans-serif;
      font-size: 1em;
      font-weight: normal;
      color: black;
  }
  </code></pre>