背景图像无法拉伸以覆盖平板电脑的高度

Question

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

This is the site im testing: http://www3.carleton.ca/clubs/sissa/html5/

CSS:

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;
}

Answer 1

I solved this issue by changing rule -webkit-background-size: cover to -webkit-background-size: cover !important

Seems to work thus far.

Answer 2

I've had more success using percentages with background-size .

element {
  background:url(xyz.jpg) no-repeat center center;
  background-size:100% 100%;
  /* OR */
  background-size:100% auto;
  /* OR */
  background-size:auto 100%;
}

Answer 3

I found a solution by putting a height and width on the HTML. The other solutions wouldn't make the background fill the screen on my Nexus 10.

html { 
    background: url(backgroundImg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
}

If I hit problems on an iPad, then I'll try adding back in the !important on those. Just want to see if I can go without.