Html Bootstrap 3 - 超大屏幕背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40731694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - Jumbotron background image
提问by Brandon Gonzales
I am having trouble setting a background image for bootstrap jumbotrons. My main.css comes after the bootstrap css and I am selecting the jumbotron using a class called "banner" which is in the same div as the jumbotron, but it still doesn't work. Here is my code...
我在为 bootstrap jumbotrons 设置背景图像时遇到问题。我的 main.css 出现在 bootstrap css 之后，我正在使用一个名为“banner”的类选择 jumbotron，该类与 jumbotron 位于同一个 div 中，但它仍然不起作用。这是我的代码...
HTML:
HTML：
<!-- Banner -->
<div class="jumbotron banner">
<div class="container">
<hgroup>
<h1>
Bits king
</h1>
<h2>
Web Design & Development
</h2>
</hgroup>
</div>
</div>
CSS:
CSS：
.banner {
height: 400px;
width: 100%;
max-height: 50%;
max-width: 100%;
min-height: 20%;
min-width: 30%;
background-image: url("../assets/images/banner.jpeg");
background-size: cover;
}
回答by AAW238
You can add a background-imageproperty to the .jumbotronclass in your custom css file (Make sure you reference your custom css file afterBootstrap. Here's an example:
您可以在自定义 css 文件中background-image向.jumbotron类添加一个属性（确保在Bootstrap之后引用您的自定义 css 文件。这是一个示例：
.jumbotron {
background-image: url("/img/your-image.jpg");
background-color: #17234E;
margin-bottom: 0;`enter code here`
min-height: 50%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
回答by Kangjun Heo
add "jumbotron-custom" to class attribute and apply this after "bootstrap" css :
将“jumbotron-custom”添加到类属性并在“bootstrap”css之后应用它：
.jumdotron-custom
{
background: url('/*background url*/') no-repeat !important;
}
..or just add !important to your 'background-image' of css.
..或者只是将 !important 添加到您的 css 'background-image' 中。
回答by Shahid
Good Morning. Try this:
早上好。尝试这个：
background-image: url("../assets/images/banner.jpg");
Let me know if it works or not?
让我知道它是否有效？
