Bootstrap全屏背景图像行为不端

Question

相对较新的bootstrap 3，并遇到全屏背景图片的问题。试图让背景图像占据导航栏下方的整个屏幕。相反，它只占据我的h1和按钮后面的空间。这是我的代码

HTML：

<header id="top" class="header">
    <div class="text-vertical-center">
        <h1>Summer's Here</h1>
        <a href="Services.html" class="btn btn-lg">Register</a>
    </div>
</header>

CSS：

    .header {
        display: table;
        position:relative;
        background: url(../images/splash.png) no-repeat center center fixed;
        width: 100%;
        height:auto;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }

会喜欢一些指导！可能是一个菜鸟错误。