html - 如何让图像占据整个空间？

Question

我正在制作一个网站，我想在标题部分给出一个图像。这是我在 HTML 文件中的代码

<header class="jumbotron">
        <div class="container">
            <div class="row row-header">
                <div class="col-xs-12 col-sm-8 col-md-12">
                    <h1>Tourister</h1>
                    <p style="padding:40px"></p>
                    <p>We take inspiration from the World's best 
                        touring experiences, and create a unique experience. You will surely be surprised by our amazing offers and deals we
                        provide throughout the year !
                    </p>
                </div>
            </div>
        </div>
</header>

我在 CSS 文件中使用了这段代码。

.jumbotron
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;     
background-image: url("../img/image6.jpg");
background-repeat: no-repeat;

}

现在的问题是我的图像没有像下图那样占据超大屏幕的整个高度和宽度。 enter image description here

我想让它占据整个空间。我使用了不同尺寸的图像，但没有用。没有一个占据整个窗口的空间。 因此，我们将不胜感激。提前致谢。

N.B.:我读过其他关于图像在堆栈溢出中没有占据整个宽度但无法让它工作的问题。

Answer 1

注意:我不完全确定您要将类(或可能是 ID)应用到页眉而不是较小的 div 之一。可能取决于你还有什么要做的。

.jumbotron 
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;     
background-image: url("../img/image6.jpg");
background-repeat: no-repeat;
background-size:100% 100%;
}

看到其他答案:这也取决于你的形象特点和你喜欢什么样的显示器。覆盖 != 100% x 100% != 包含。参见 CSS3 background-size Property "Try-It" .