title: Background Image not stretch to cover tablet Height
body: <p>I have a large enough background image for my site but when I see it using my table the image does not cover the entire screen. You can see the grey background (generated by browser i assume) at the bottom. Also, if i expand articles on my page, the height increases but not the image it goes to the center</p>
  
  <p>This is the site im testing: <a href="http://www3.carleton.ca/clubs/sissa/html5/" rel="nofollow noreferrer">http://www3.carleton.ca/clubs/sissa/html5/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>body{
      width: 100%; /*always specify this when using flexBox*/ 
      height:100%;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      text-align:center;
      -webkit-box-pack:center; /*way of centering the website*/
      -moz-box-pack:center;
      box-pack:center;
      background:url('images/bg/bg14.jpg') no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/l1ym5.png" alt="enter image description here"></p>