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

我正在制作一个网站，我想在标题部分给出一个图片，这是我在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
我希望它占据整个空间。我使用了不同大小的图像，但没有用。没有一个占据了整个窗口空间。
所以我们很感激你的帮助。谢谢你的帮助。
注意：我读过一些其他的问题，关于图像在堆栈溢出中不占整个宽度，但无法正常工作的问题。

最佳答案

注意：我不完全确定您是否希望将类（或者可以是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"。