响应的Bootstrap Jumbotron背景图象 [英] Responsive Bootstrap Jumbotron Background Image

问题描述

我使用bootstrap jumbotron，并且包括一个背景图片。调整屏幕大小使图像平铺和重复，而我想要响应地调整图像大小。

I'm using bootstrap jumbotron, and including a background image. Resizing the screen makes the image tile and repeat, whereas I want the image to be responsively resized.

<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>

如何使图像响应？ 网站在这里。感谢您的想法！

How would you go about making the image responsive? The site is HERE. Thanks for your ideas!

推荐答案

最简单的方法是将背景大小设为覆盖

The simplest way is to set the background size to "cover"

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

Steve

这篇关于响应的Bootstrap Jumbotron背景图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！