如何在引导程序中为 jumbotron 添加背景图像？答案

【问题标题】：How to add background images for jumbotron in bootstrap?如何在引导程序中为 jumbotron 添加背景图像？
【发布时间】：2015-10-10 06:47:22
【问题描述】：

我 2 天前才开始使用 bootstrap。

我现在面临的问题是我无法将背景图片放到我的整个页面甚至我的 jumbotron 上。我尝试直接将路径（相对和绝对）提供给 div 标签，但它不起作用。我也尝试过css，但我仍然没有在输出中看到任何背景图像。请帮忙！

我主要想为 jumbotron 制作背景图片。

这是我写的代码：

HTML：

<div class="row">
    <div class="jumbotron">
        <div class="container">
            <center>
                <h1>Avudo computers</h1>
                <h5>Redesigning HOPES.</h5>
            </center>
        </div>
    </div>
</div>

CSS：

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;

【问题讨论】：

标签： css html twitter-bootstrap background

【解决方案1】：

如果您似乎根本没有在 CSS 中声明类/ID。

您必须将.jumbotron 附加到您的CSS rules。

参见示例。

body,
html {
  background: url(http://i.telegraph.co.uk/multimedia/archive/02423/london_2423609k.jpg) center center no-repeat;
  background-size: cover;
  height: 100%;
}
div.jumbotron {
  background-image: url(http://placehold.it/1350x550/f00/f00);
  background-position: 0% 25%;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  text-shadow: black 0.3em 0.3em 0.3em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
  <div class="container">
    <center>
      <h1>Avudo computers</h1>
      <h5>Redesigning HOPES.</h5>
    </center>
  </div>
</div>

【讨论】：

Yaaa 我有 dtne 仍然无法正常工作！即使对于body标签，背景图像也不起作用，只有当我使用引导程序时我才会面临这个问题，否则它很好。 :(
那么你的图片路径可能就是原因；尝试使用我的答案中的托管文件，看看它是否有效。
好的，我也试试。
不客气，如果问题已解决，请将您的问题标记为已回答，以便其他人从中受益。

【解决方案2】：

尝试这样设置整个页面的图像

body  {
    background-image: url(../img/jumbotronbackground.jpg);

}

【讨论】：

试过了，在引导程序中不起作用。通常它可以工作！