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背景图片

回答

相关问题