html - 如何将背景图像设置为全长并使文本居中对齐？

Question

我的标题横幅设置为 100% 宽度，但它没有覆盖顶部的所有内容，它看起来像 70%，文本没有设置为居中，当我在 chrome 中检查元素时，它显示 100% 宽度，但在实际显示中它不是。我该如何解决这个问题？

main.html

<div class="row">
    <div class="col-md-12">
        <div class="header-banner">
            <h1>Server</h1>
        </div>
    </div>
</div>

主.css

.header-banner {
    background:url('../img/header_master.jpg');
    width:100%;
    min-height:70px;
    background-repeat: no-repeat;
    text-align: center;
}

Answer 1

试一试:

.header-banner {
        background:url('../img/header_master.jpg');
        width:100%;
        min-height:70px;
        background-repeat: no-repeat;
        text-align: center;
        background-size: cover;
    }