Image Behind Bootstrap Jumbotron

user_11727439 0
Viewed 621

I am relatively new to web development and am running into some trouble with bootstrap/CSS. I am attempting to have a background image behind the default bootstrap jumbotron. On top of this, I also can't seem to get the image to show up at all. I am a little lost. Any help would be much appreciated.

My code snippets are below:

@import "bootstrap-sprockets";
@import "bootstrap";

/* background */
.jumbotron {
    font-family: 'Josefin Slab', serif;
    font-size: 17px;
}
  
.jumbotron .container {
    position:relative;
    z-index:2;
    padding:2rem;
    background: rgb(231, 231, 231);
    border-radius: 17px;
}
  
.jumbotron-background {
    object-fit: cover;
    font-family: 'object-fit: cover;';
    position: absolute;
    top:0;
    z-index:1;
    width:100%;
    height:100%;
}

.center {
    text-align: left;
    font-size: 17px;
    position: relative;
    overflow: hidden;
}

.imgBg {
    content: url("../images/sw_web_backdrop.jpg");
}

...
<div class="jumbotron jumbotron-fluid bg-dark">
  
  <div class="jumbotron-background">
    <img class="imgBg" alt="smallworld network"/>
  </div>

  <div class="container">
    <h1> [content]</h1>
    <h2>[content]</h2>
    <p>
    [content]
    </p>  

    <div id="surveyContainer">
      <%= javascript_include_tag('survey_jquery.js') %>
      <%= javascript_include_tag('mvp_survey.js') %>
    </div>
  </div>
</div>

twitter-bootstrap css html
2 Answers

wrap your jumbotron inside a <div class="jumbotron-holder>" and you can use background property to set background-image

@import "bootstrap-sprockets";
@import "bootstrap";

/* background */

.jumbotron {
  font-family: 'Josefin Slab', serif;
  font-size: 17px;
  position: relative;
  z-index: 2;
  background: rgb(231, 231, 231);
  border-radius:20px!important  
}

.jumbotron-holder {
  background: url(https://www.w3schools.com/bootstrap4/la.jpg) no-repeat center;
  background-size: cover;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="jumbotron-holder p-5">
    <div class="container">
     <div class="jumbotron jumbotron-fluid p-4">
      <h1> [content]</h1>
      <h2>[content]</h2>
      <p>
        [content]
      </p>

      <div id="surveyContainer">
        <%= javascript_include_tag('survey_jquery.js') %>
          <%= javascript_include_tag('mvp_survey.js') %>
      </div>
    </div>
  </div>
</div>

user_93804800

check the code below 

@import "bootstrap-sprockets";
@import "bootstrap";

/* background */

.jumbotron {
  font-family: 'Josefin Slab', serif;
  font-size: 17px;
}

.jumbotron .container {
  position: relative;
  padding: 2rem;
  background: rgb(231, 231, 231);
  border-radius: 17px;
}

.jumbotron-background {
  object-fit: cover;
  font-family: 'object-fit: cover;';
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
background: url("https://cdn.urlencoder.org/assets/images/url_fb.png") no-repeat center center fixed;
background-size: 100% 100%;
}


.center {
  text-align: left;
  font-size: 17px;
  position: relative;
  overflow: hidden;
}
<div class="jumbotron jumbotron-fluid bg-dark">
  <div class="jumbotron-holder">
    <div class="jumbotron-background">
      hello
    </div>
  </div>

  <div class="container">
    <h1> [content]</h1>
    <h2>[content]</h2>
    <p>
      [content]
    </p>

    <div id="surveyContainer">
      <%= javascript_include_tag('survey_jquery.js') %>
        <%= javascript_include_tag('mvp_survey.js') %>
    </div>
  </div>
</div>

user_114031420
Related