Jumbotron BG图像可调整大小，不会显示

Question

might be a stupid question but i am trying to fix my Jumbotron header with a bgimage..it did work before but the image was squished when resized..found a workaround but now it kinda doesnt show up anymore :

<div class="container">
    <div class="row">
        <div class="col-md-12 jumbotron" id="jumbotronBG">
            <div class="text-center">
                  <h1>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA</h1>
                  <a href="#services" class="btn btn-md btn-danger">SERVICES</a>
                  <a href="#companies" class="btn btn-md btn-success">COMPANIES</a>
            </div>
        </div>
    </div>

 .jumbotronBG {
  background: url('../img/bg.jpg') no-repeat center center !important;
  position: fixed !important;
  width: 100% !important;
  height: 350px !important; /*same height as jumbotron */
  top:0 !important;
  left:0 !important;
  z-index: -1 !important;
}

.jumbotron {
  margin-bottom: 40px !important;
  height: 350px !important;
  color: white !important;
  text-shadow: black 0.1em 0.3em 0.3em !important;
  background:transparent !important;

}

Answer 1

You have a .jumbotronBG class in your CSS, but you are not using it in your HTML.

Just change your ".jumbotronBG" class definition in your CSS file to this: "#jumbotronBG" and the styles will be applied correctly.

You could also put the background style inside the ".jumbotron" class definition, but if you use more than one jumbotron in your project, all them will have the same customized background and that may not be your desired behavior.

Answer 2

just add your background url to .jumbotron class.

html

<div class="container">
<div class="row">
    <div class="col-md-12 jumbotron">
        <div class="text-center">
              <h1>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA</h1>
              <a href="#services" class="btn btn-md btn-danger">SERVICES</a>
              <a href="#companies" class="btn btn-md btn-success">COMPANIES</a>
        </div>
    </div>
</div>

and css

.jumbotron {
  background-image: url('../img/bg.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-bottom: 40px !important;
  color: white !important;
  text-shadow: black 0.1em 0.3em 0.3em !important;
}

https://jsfiddle.net/eaxzjmmk/