Bootstrap敏感的jumbotron背景图象

时间:2016-08-27 14:25:21

标签: html css twitter-bootstrap

我试图创建一个带有响应背景图像的bootstrap jumbotron,因为我的第一个方法是静态的(我必须用background-color: white !important;填充空白区域):

https://jsfiddle.net/ety0atsm/2/

现在我正在使用这个CSS,但高度配置不正确。无论屏幕大小使用何种设备,如何配置背景图像以覆盖整个屏幕?

https://jsfiddle.net/b40Lyep1/6/

3 个答案:

答案 0 :(得分:1)

好问题,值得Upvote,试试这个

<div class="jumbotron">
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>


.jumbotron {
margin-bottom: 0px;
background-image: url(../img/jumbotronbackground.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}

答案 1 :(得分:1)

请查看 CODEPEN 上的示例代码。 我希望这可以解决你的问题..享受:)

HTML:

<div class="jumbotron"></div>

CSS:

body {
  margin:0;
  padding:0;
}
.jumbotron {
  height: 600px;
  background-repeat: no-repeat;
  background-image: url('data:image/jpeg;base64,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');
  background-size: contain;
}

答案 2 :(得分:0)

您可以使用height: 100vh属性来执行此操作。这是update fiddle