CSS, HTML : inside bootstrap div element, fill background

Question

I am trying to fill the background of bootstrap jumbotron

My code is

.jumbotron {
    padding: 5px;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 200;
    line-height: 2.1428571435;
}

.jumbotron  div#bg:after {
    content: "";
    background: url("image.jpg");
    opacity: 0.2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
}

And the element I am trying to fill

<div class="jumbotron">
  <div id="bg"></div>
  <p><a class="btn btn-lg btn-success" href="http://github.com" target="blank">GitHub</a></p>
</div>

But this code fills the entire page, while what I want is only filling the selected element.

How should I do this with CSS?

Answer 1

You need to add position:relative to .jumbotron to restrain the absolutely positioned element to its bounds, also you don't need the empty div, you can just use the :after pseudo-element on the .jumbotron itself:

 .jumbotron {
     position: relative;
     background: none;
     padding: 5px;
     margin-bottom: 5px;
     font-size: 10px;
     font-weight: 200;
     line-height: 2.1428571435;
 }
 .jumbotron:after {
     content:"";
     background: url("image.jpg");
     opacity: 0.2;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     position: absolute;
     z-index: -1;
 }

Demo fiddle