Question

所以我意识到如果我有更多的内容，它会显示完整的背景图像。有没有一个巧妙的方法来做到这一点？

<div class="jumbotron jumbotron-fluid" style="background: url('./assets/img/mhacks.jpg') no-repeat center center; margin-top: 120px;">
    <div class="container text-sm-center p-t-3">

        <br>
        <br>
        <br>
        <br>
        <p class="lead">Under construction</p>
        <br>
        <br>
        <br>


    </div>
</div>

Answer 1

我会尝试使用contain属性的cover或background-size值：

＆＃13;

.jumbotron.test {
  background: url(http://www.outdoor-photos.com/_photo/4488849.jpg) no-repeat;
  background-size: cover; /*** Try interchanging with contain/cover when using media queries for different results at different viewports. ***/
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="jumbotron jumbotron-fluid test">
    <div class="container text-sm-center p-t-3">
        <br>
        <br>
        <br>
        <br>
        <p class="lead">Under construction</p>
        <br>
        <br>
        <br>


    </div>
</div>

＆＃13;

Answer 2

  background:  bg-color bg-image position/bg-size bg-repeat; //shorthand

div{
      background: #333 url('../img-url.jpg') no-repeat center center;
      background-size: cover;
    }

Answer 3

更改您的html如下：

<div class="jumbotron jumbotron-fluid" style="background: url('variable-scope-ruby.jpg') no-repeat center center; margin-top: 120px;">
    <div class="container text-sm-center p-y-3">       
    <p class="lead">Under construction</p>
    </div>
</div>

还添加以下css样式：

<style>
.lead{
  padding: 30px 0px;
  text-align:center;
}
</style>

并根据您的要求更新.lead填充。

如何在超大屏幕中显示完整的背景图像？

3 个答案: