如何在jumbotron中显示完整的背景图像？

所以我意识到如果我有更多的内容它显示完整的背景图像。有没有一个干净的方式来做到这一点？如何在jumbotron中显示完整的背景图像？

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

来源

2016-06-15 Mona Jalal

添加样式'background-size：cover;'或'background-size：contains;'。 –

@yariash so background-size：包含除了缩小原始图像相当多的作品。有没有办法手动更改比例尺？ –

我会使用contain或cover价值为background-size性试验：

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

来源

2016-06-15 10:12:41

当我用封面试过你的代码时，它最终看起来像这样，并且包含它显着缩小图像http://imgur.com/rSIFEo7 –

@MonaJalal你是否包含'background-repeat：no-repeat'？或者在'background'属性中添加'no-repeat'？ –

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

来源

2016-06-15 10:13:27 rittam

更改如下您的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填充根据您的要求。

来源

2016-06-15 11:44:54 Amit

如何在jumbotron中显示完整的背景图像？

回答

相关问题