How to darken the background image in CSS?

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>

There you go. I have added the code. – Ege Kaan Gürkan Apr 03 '16 at 18:40 — Ege Kaan Gürkan, Apr 03 '16 at 18:40

ntgCleaner · Accepted Answer · 2016-04-03T18:53:44.187

7

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/

edited Apr 03 '16 at 18:53

answered Apr 03 '16 at 18:44

ntgCleaner

5,865
9
48
86

didn’t work either :( – Ege Kaan Gürkan Apr 03 '16 at 18:48
try adding `z-index:1` or higher to the `:after`, just to see if it's behind – ntgCleaner Apr 03 '16 at 18:49
This does not do what you think it does: https://jsfiddle.net/e8c3ex0h/2/ (I've done both `before` and `after`, same result. – random_user_name Apr 03 '16 at 18:49
@cale_b Your example looks like it works fine. What am I missing? – ntgCleaner Apr 03 '16 at 18:49
http://jsbin.com/ritizawinu/edit?html,css,js,output – Miro Apr 03 '16 at 18:50
The heading is also dimmed. Can't get the heading to "pop" white above the jumbotron. (Checking in FF, Mac). – random_user_name Apr 03 '16 at 18:50
@cale_b, Ah, I see. Let me try some stuff – ntgCleaner Apr 03 '16 at 18:51
@cale_b, I've updated your fiddle to work: https://jsfiddle.net/e8c3ex0h/3/, Will update the answer – ntgCleaner Apr 03 '16 at 18:52
@EgeKaanGürkan, I have found a solution and am editing my answer now – ntgCleaner Apr 03 '16 at 18:52
Yep - got it. Need position on the h1 for z-index to work. Always forget that.... https://jsfiddle.net/e8c3ex0h/4/ – random_user_name Apr 03 '16 at 18:53
No need for z-index: https://jsfiddle.net/e8c3ex0h/5/ – Miro Apr 03 '16 at 18:56
@miro, Great point. It should sort itself out when you add a position to the inner elements. – ntgCleaner Apr 03 '16 at 18:56
Thanks a lot! This worked!! – Ege Kaan Gürkan Apr 03 '16 at 19:08
1

@EgeKaanGürkan, You got it! Please check John's answer though - it is better practice it seems. – ntgCleaner Apr 03 '16 at 19:09

score 1 · Answer 2 · answered Apr 03 '16 at 18:41

1

You can try the following in you CSS to see if you get the desired result

    #element {
-webkit-box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1);
box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1);
}

answered Apr 03 '16 at 18:41

RiaanV

260
2
14

Not quite the thing i want :/ – Ege Kaan Gürkan Apr 03 '16 at 18:42
So you want like an overlay? – RiaanV Apr 03 '16 at 18:42
I want the background picture to be darkened a bit so that the text in front can be read clearly. – Ege Kaan Gürkan Apr 03 '16 at 18:43
So you want to adjust the contrast of the image? – RiaanV Apr 03 '16 at 18:44
Not quite. Imagine a semi opaque dark rectangle placed on top of the image. – Ege Kaan Gürkan Apr 03 '16 at 18:48
Cool you provide a screenshot for me? Just so that I can give you the correct answer – RiaanV Apr 03 '16 at 18:58

John Slegers · Answer 3 · 2016-04-03T19:02:27.967

This is how to do it :

body, h1 {
    margin: 0;
}

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

h1 {
    color: #fff;
}

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

(see also this Fiddle)

How to darken the background image in CSS?

3 Answers3