Full width & height background image with vertically & horizontally centred text in Foundation

Question

I have added a full width & height background image with vertically & 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 & 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.

HTML:

<div class="fullscreen-cont">
  <div class="fullscreen-img"></div>
  <div class="content xy-center">
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h2>
  </div>
</div>

SCSS:

.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%);
}

Currently: http://imgur.com/BCIAGZE

How I would like the text width to increase using row & large-12 columns with the background image if possible: http://imgur.com/b27uT7m

Answer 1

Add your background image as

background: url(../images/your_image.jpg) fixed no-repeat center center;
background: url(../images/your_image.jpg) no-repeat center center; /* if you don't want it fixed */

for texts use

width:100px;
height:100px;
position: absolute;
text-align: center;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;

Answer 2

So I solved this myself. If you have any recommendations or see any flaws in my solution please feel free to point them out. Furthermore, this solution utilises viewport units which are only compatible with modern browsers.

HTML:

  <div class="hero-text">
      <div class="row">
        <div class="large-12 columns xy-center">
          <h1>Hi</h1>
          <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h2>
        </div>
      </div>
    </div>

CSS:

// 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%);
}

.hero-text {
  width: 100%;
  height: 100%;
  background: url('http://25.media.tumblr.com/1adc4029ef3a31124f222add70fa3553/tumblr_n2k1499dIp1st5lhmo1_1280.jpg') center center no-repeat;
  background-size: cover;
  h1 {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
  }
    h2 {
    color: #fff;
        text-align: center;
        text-transform: uppercase;
    }
}