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

您正在寻找的属性是background-size。

将此添加到您的代码中

.jumbotron {
  ...
  background-size: cover; /* Can also be "contain" */
  ...
}

Answer 2

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

Answer 3

您希望在background-size: cover课程的CSS中添加.jumbotron。这将确保背景图像始终是元素的完整大小，而不会扭曲纵横比。

Answer 4

试一试。

.jumbotron {
background-image: url("../img/image6.jpg");
color: white;
background-attachment:fixed;
min-height:400px;
margin-top:0px;
margin-bottom:8px; }

Answer 5

如果您还没有尝试过，请尝试100％宽度，如果这样做没有帮助尝试提高值。

Answer 6

将background-size属性cover添加到jumbotron

.jumbotron{
  background-size: cover;
 }

Answer 7

background-size: cover;

除非图片与contain具有相同的宽高比，否则

div将留空。

Answer 8

您可以使用css属性：背景尺寸：盖;

请参阅：http://codepen.io/anon/pen/pbLyRp

.jumbotron
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;     
background-image: url("https://pixabay.com/static/uploads/photo/2015/08/24/12/54/banner-904889_960_720.jpg");
background-repeat: no-repeat;
background-size:cover;
}

和http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Answer 9

我尝试了你的代码，并且使用563 kb大小的图像，它可以很好地工作。你应该使用大尺寸图像或使用

   background-size:cover; in your css

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

9 个答案: