Darkening background image with :before CSS3 pseudo-selector

Question

My goal is to use some CSS tricks to add dark overlay with 50% opacity to jumbotron background image to make it darker.

I've tried to use :before CSS selector to add dark rectangle in front of jumbotron which works fine on normal jumbotron class, however using the same method on fluid jumbotron, makes content and button in container covered and unreachable.

My HTML and CSS code. Currently I'm using Bootstrap 4 classes.

.jumbotron {
  position: relative;
  background: url(https://source.unsplash.com/7bzbyafVTYg/1920x1080) no-repeat bottom center / cover; 
}
.jumbotron:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 51, 153, 0.8);
}
.jumbotron .container {
  padding: 100px 0;
}
.jumbotron h1,
.jumbotron .lead {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron jumbotron-fluid mb-0 text-center">
 <div class="container">
  <h1 class="display-4">MAIN PAGE</h1>
  <a class="btn btn-primary btn-lg mt-" href="#sec-pricing" role="button">Learn more</a>
 </div>
</div>

Paste your code for your triangle, show us what you have done. — David, Apr 04 '18 at 06:52

score 1 · Accepted Answer · answered Apr 04 '18 at 07:02

Try this with adding z-index

.jumbotron {
  position: relative;
  background: url(https://source.unsplash.com/7bzbyafVTYg/1920x1080) no-repeat bottom center / cover; 
}
.jumbotron:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 51, 153, 0.5);
}
.jumbotron .container {
    z-index: 10;
    position: relative;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="jumbotron jumbotron-fluid mb-0 text-center">
    <div class="container">
        <h1 class="display-4" style="color:var(--white);">MAIN PAGE</h1>
        <a class="btn btn-primary btn-lg mt-" href="#sec-pricing" role="button">Learn more</a>
    </div>
 </div>

score 0 · Answer 2 · answered Apr 04 '18 at 07:02

Change some CSS like below:

.jumbotron {
  position: relative;
  background: url(https://source.unsplash.com/7bzbyafVTYg/1920x1080) no-repeat bottom center / cover; 
}
.jumbotron:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 51, 153, 0.8);
  z-index: 400;
}
.jumbotron .container {
  padding: 100px 0;
  position: relative;
  z-index: 800;
}
.jumbotron h1,
.jumbotron .lead {
  color: #fff;
}

<div class="jumbotron jumbotron-fluid mb-0 text-center">
 <div class="container">
  <h1 class="display-4">MAIN PAGE</h1>
  <a class="btn btn-primary btn-lg mt-" href="#sec-pricing" role="button">Learn more</a>
 </div>
</div>

score 0 · Answer 3 · answered Apr 04 '18 at 08:16

Another easier way is to use multiple background considering a linear-gradient as a layer over the image:

.jumbotron {
  position: relative;
  background: 
  linear-gradient(rgba(0, 51, 153, 0.8),rgba(0, 51, 153, 0.8)),
  url(https://source.unsplash.com/7bzbyafVTYg/1920x1080) no-repeat bottom center / cover; 
}

.jumbotron .container {
  padding: 100px 0;
}
.jumbotron h1,
.jumbotron .lead {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron jumbotron-fluid mb-0 text-center">
 <div class="container">
  <h1 class="display-4">MAIN PAGE</h1>
  <a class="btn btn-primary btn-lg mt-" href="#sec-pricing" role="button">Learn more</a>
 </div>
</div>

Darkening background image with :before CSS3 pseudo-selector

3 Answers3