响应的Bootstrap Jumbotron背景图象

本文介绍了响应的Bootstrap Jumbotron背景图象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用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背景图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！