現在Java、Seasar2(SAStrats/S2JDBC)、JSP、PostgreSQLで
DBを使ったWebアプリケーションを作っています。

Bootstrap3でログイン画面を再構築しています。

そこで質問があるのですが
結論から言うと

画面の背景の下が切れないようにするにはどうしたらよいでしょうか？

次のように下の方に余白ができ不細工になってしまいます。

次のことを試しましたがうまくいきませんでした。

css

html , body {
min-height: 100%;
height: auto !important;
height: 100%;
}

css

body > .header{
  height: auto; /* 要素を超えた分の背景が伸びないブラウザ用 */
}

実際の現在のソースは次のようになっています。

login.jsp

<body>
<s:form action="verify">
<header id="top" class="header">
<div class="text-vertical-center">
<h1>Tennis DataBase</h1>
<br>
<div Align="center"><html:errors /></div>
<div Align="center"><html:text styleId="hoge" property="loginId" styleClass="form-control" style="width:250px;"/></div><br>
<div Align="center"><html:password styleId="hoge2" property="password"  styleClass="form-control" style="width:250px;"/></div><br>
<html:submit value="ログイン" styleClass="btn btn-dark btn-lg"/><br><br>
<s:link href="./registPage">アカウント登録はこちら</s:link>
</div>
</header>
</s:form>
</body>

css

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.text-vertical-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.header {
    display: table;
    position: relative;
    width: 100%;
    height: 110%;
    background: url(../img/bg.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

CSSの問題以前にタグが邪魔していたりするのかもしれません。
もしわかる方がいれば教えて頂けるとうれしいです。