如何在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中顯示完整的背景圖像？

回答

相關問題