title: Full width & height background image with vertically & horizontally centred text in Foundation
body: <p>I have added a full width &amp; height background image with vertically &amp; horizontally centred text to a site I'm working on. I have achieved this to some degree but I am having trouble with my text being constrained to a certain width and I can't work out why. Ultimately I would like to include Foundations row &amp; large-12 columns in my solution and have the text span the width of the column rather than being condensed to 683px which it currently is. Any advice and guidance on this would be very much appreciated. </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="fullscreen-cont"&gt;
    &lt;div class="fullscreen-img"&gt;&lt;/div&gt;
    &lt;div class="content xy-center"&gt;
      &lt;h2&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SCSS: </p>
  
  <pre><code>.fullscreen-cont,
  .fullscreen-img {
    display: block;
    position: relative;
    min-width: 100vw;
    min-height: 100vh;
  }
  
  .fullscreen-img {
    display: block;
    z-index: 1;
    min-width: 100vw;
    min-height: 100vh;
    // background position when .fullscreen-img overflows
    background:transparent url('http://24.media.tumblr.com/2cfbc3f3c40e18949afd5d5dadfa4664/tumblr_n381f5z8es1st5lhmo1_1280.jpg') center center no-repeat;
    background-size: cover;
  }
  
  .content {
    display: block;
    position: relative;
    z-index: 2;
    h2 {
      color: #fff;
      text-align: center;
    }
  }
  
  // Vertically and horizontally center text within a div
  .xy-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  </code></pre>
  
  <p>Currently: <a href="http://imgur.com/BCIAGZE" rel="nofollow">http://imgur.com/BCIAGZE</a></p>
  
  <p>How I would like the text width to increase using row &amp; large-12 columns with the background image if possible: <a href="http://imgur.com/b27uT7m" rel="nofollow">http://imgur.com/b27uT7m</a></p>