Responsive Bootstrap Jumbotron背景圖片

我正在使用bootstrap jumbotron，並且包含背景圖片。調整屏幕大小會使圖像平鋪並重復，而我希望圖像的響應性調整大小。Responsive Bootstrap Jumbotron背景圖片

<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;"> 
    <div class="container for-about"> 
    <h1>About</h1> 
    </div> 
</div>

你將如何去使圖像響應？ The site is HERE。感謝您的想法！

來源

2014-02-24 Nick B

您可以使用「封面」而不是「100％」 –

處理圖像上的正確尺寸是非常重要的一步。我發現使用sketch3減輕了許多這些問題。 – Winnemucca

不幸的是，沒有辦法使div height respond to the background-size。我使用的最簡單的解決方案是在包含該背景圖像的jumbotron中添加一個img標籤。

來源

2014-02-24 23:14:19

這就是我所做的。
首先，只是重寫超大屏幕類，並執行以下操作：

.jumbotron{ 
    background: url("bg.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
}

所以，現在你有到位響應背景下的超大屏幕。但是，正如Irvin Zhan已經回答的那樣，背景的高度仍然不能正確顯示。

一兩件事你可以做的是一些空間，如本填寫您的DIV：

<div class="jumbotron"> 
    <div class="container"> 
     About 
     <br><br><br> <!--keep filling br until the height is to your liking--> 
    </div> 
</div>

或者，更優雅，你可以設置容器的高度。您可能需要添加另一個類，以便不重寫Bootstrap容器類。

<div class="jumbotron"> 
    <div class="container push-spaces"> 
     About 
    </div> 
</div> 

.push-spaces 
{ 
    height: 100px; 
}

來源

2014-06-11 17:01:00 Fadils

最簡單的方法是設置背景大小爲「覆蓋」

.jumbotron { 
background-image: url("../img/jumbotron_bg.jpg"); 
background-size: cover;}

史蒂夫

來源

2014-11-18 16:03:00 Steve

我發現這個工作非常適合我：

.jumbotron { 
background-image: url(/img/Jumbotron.jpg); 
background-size: cover; 
height: 100%;}

你可以調整屏幕大小，它將始終佔用100％的窗口。

來源

2015-06-25 10:40:08 Justin

我只想補充'最小高度：300像素;' – Pathros

TLDR：使用background-size: 100% 100%;。

background-size: cover;可能會切斷產生不良結果的圖像的某些部分。

使用background-size: 100% 100%;您強制圖像佔用height和width的父元素的100%。

有關更多信息，請參閱W3Schools。

這裏是一個工作，響應jumbotron背景圖片：

<div class="jumbotron" style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;"> 
    <h1>Welcome</h1> 
    <p class="lead">Your message here</p> 
    <p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p> 
</div>

來源

2016-03-02 16:38:59 maxshuty

這是我該怎麼辦：

<div class="jumbotron" style="background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> 
 
    <h1>Hello</h1> 
 
</div>

來源

2016-06-06 13:44:21 JustRocca

請詳細信息添加到您的答案:-) – Jer

我沒有改變的CSS（或任何其他）的.jumbotron類。正如我寫的那樣，我只是直接在html文件中添加了這種風格。 – JustRocca

這種方法比修改CSS，因爲超大屏幕通常只出現在網站上曾經此外，通過具有設置內嵌插入一個更好的，它使代碼的程序生成的是我的框架的情況下。我有一個插入隨機圖像到超大屏幕產生的頁面每次的超大屏幕（）函數。這允許在網站上創建一個很好的隨機性，而不必使用傳送帶 –

下面的代碼適用於所有的屏幕：

.jumbotron { 
    background: url('backgroundimage.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
}

蓋屬性將調整的背景圖像以覆蓋整個容器，即使其具有拉伸圖像或剪切一點點關閉邊緣中的一個。

來源

2018-02-13 19:57:32

Responsive Bootstrap Jumbotron背景圖片

回答

相關問題