Question

我在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;

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

Answer 2

尝试这样设置整页图像

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

}

如何在bootstrap中添加jumbotron的背景图像？

2 个答案: