html – Bootstrap响应式jumbotron背景图像

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

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

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

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

最佳答案 好问题,值得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;
}
点赞