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

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

我会尝试为 background-size 属性使用 contain 或 cover 值:

.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. ***/
}

<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>