How to darken the background image in CSS? [duplicate]

Question

I have a jumbotron from bootstrap and I want to darken its background without touching the text which is entered in it. Is there a way to do such a thing?

I have looked everywhere, but all solutions I've found darken the text as well.

What I have so far:

.mainJumbotron {
    margin: 0px;
    height: 250px;
    text-align: center;
    background-image: url(http://i.imgur.com/qj2w73W.png);
    background-repeat: no-repeat;
    background-size: cover;
}

<div class="jumbotron mainJumbotron">
    <h1 style="">Hakkımızda</h1>
</div>

Answer 1

try something like this:

In your jumbotron class, give it a little more CSS by adding position:relative; to it if it's not already there. That will allow the next step to be positioned inside of that box.

Then, add an :after pseudo element. with the following CSS

.jumbotron:after {
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    position:absolute;
    top:0;
    left:0;
    z-index:1 /*Added this in the updated */
}

the background-color shade is controlled by the final value. 0.5 is 50% opacity, raise to 1 or lower to 0 to get your desired darkness.

UPDATE What has been pointed out is that anything inside of the box is covered by the new pseudo element. Here's a cheap fix. Add z-index:1; to your :after alement, then add the below

.jumbotron > * {
    position:relative;
    z-index:2;
}

Thanks to cale_b https://jsfiddle.net/e8c3ex0h/3/