如何让背景填满屏幕，但在响应式设计中保持居中

Question

我有一个网站。这是一个单页网站，登陆页面有一些文字和一个大背景图片。它看起来像这样：

这一切都完美无缺，这是我用于它的代码。

指数：

<div class="banner" id="header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 col-md-offset-4 text-center">
                <div class="center-block">
                    <h1 class="landing-head">Welcome</h1>
                    </br >
                    <p class="landing-text">A portfolio</p>
                    </br >
                    <a class="nostyle-link" data-scroll="" href="#about">
                        <div id="go-button">
                            <p>Discover</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

css：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}


/*------ background and divider styles ------*/
.banner {
    height:100%;
    width: 100%
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-position: top left, center center;
    background-repeat: repeat, no-repeat;
    z-index: -1;
}

.content {
    height: 60% !important;
    background-color: white;
}

#header {
    background-image: url("../images/background1_2_2.jpg");
}

#divider {
    background-image: url("../images/divider.jpg");
}

现在的问题是，当我在响应模式下运行它时，背景图像不会缩放或居中，它只是保持不变，结果如下：

如您所见，图像未居中，但视图窗口只是在其上方移动。我能解决这个问题吗？

Answer 1

改变

background-position: top left, center center;

到

background-position: center center;