How to darken a CSS background image?

Question

I am pulling my hair out over this. I have tried literally everything I have found and at this point I'm guessing I must just be making some kind of mistake. I am trying to darken the background image so that it is not quite as saturated.

Here is my HTML:

<body id="home">
    <header>
        <nav>
            <ul class="pull-left">
                <li><a href="#">Bearbeard Logo</a></li>
                <li><a href="#">World</a></li>
            </ul>
            <ul class="pull-right">
                <li><a href="#">Eretikas</a></li>
                <li><a href="#">Custom</a></li>
            </ul>
            <div id="slogan">THE HERETIC SWORD</div>
        </nav>
    </header>
</body>

And my CSS:

#home {
  background-image: url(file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg);
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}
nav li {
  display: inline;
  position: relative;
  float: left;
}
nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}
#slogan {
  color: #FFFAF0;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 18px;
  opacity: 0.5;
  text-align: center;
  font-weight: bold;
}

This gives me a background that completely covers the page. But I want to darken it (without hovering, or clicking). Everything I have tried has NOT achieved any darkening whatsoever (I've tried fake-gradients, reba stuff, etc.), and somehow gets in the way of <div id="slogan"> and <nav>, pushing them all over the place.

Is my formatting just totally incorrect?

I am trying to learn how to do it via CSS so that I don't have to edit photos in the future (as opposed to just using them as they come and using the tools in my utility belt to do it for me). — theblackveil, Jul 26 '15 at 00:38
Here is an [answer](http://stackoverflow.com/questions/11535392/how-to-decrease-image-brightness-in-css) on how to decrease brightness, does that help? I would recommend using the `filter: brightness` answer. — Spencer Wieczorek, Jul 26 '15 at 00:40
@SpencerWieczorek -- I've actually tried that and it strangely does nothing, which is part of why I'm so confused. — theblackveil, Jul 26 '15 at 00:50
Which browser(s) are you using/supporting? Maybe the browser you're in doesn't support 'filter' at all. — BSMP, Jul 26 '15 at 00:52
@BSMP I'm in the most recent Safari which is listed as supporting -webkit-filter. Not sure why it wasn't making any noticeable changes, though. — theblackveil, Jul 26 '15 at 01:02

score 42 · Accepted Answer · answered Jul 26 '15 at 00:42

42

#home {
   background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}

This should work

answered Jul 26 '15 at 00:42

Frankenmint

1,570
3
18
33

1

So, I have no idea why... But this did it. I tried this before, written with the rgba portions on their own lines (or maybe I only had one rgba instead of both?). edit: So, I don't know how to show you what I was doing before to determine why this is working now when it didn't work before. :'/ Regardless, could you explain why this darkens the entire background when all of the other methods shown (and in other answers for this SAME question) would only darken the contents of
?
– theblackveil Jul 26 '15 at 00:58
I think your tags were not formatted properly and the before and hover:body elements were bleeding over into the nav's markup. I can't know without you going back a few steps and pasting the source here to confirm. – Frankenmint Jul 26 '15 at 01:12
just to make sure I understand you, you're suggesting that I was possibly not closing or opening the () or {} correctly, leading to this section of instructions eating the ones that follow? This very well may be totally correct. – theblackveil Jul 26 '15 at 01:13
well... more like the <> tags, but yes - something as little as " – Frankenmint Jul 26 '15 at 01:20
The joys of starting out. Well, thank you again, I really appreciate the input. – theblackveil Jul 26 '15 at 01:35
No idea why but this doesn't seem to work at all for me in either Chrome or Safari. Standard html starter layout with empty html and body tags and the following css: `html, body { margin: 0; padding: 0; } body { background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('LarryPhone.jpg'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }` – James Hubert Jan 13 '20 at 15:53
@jwhubert91 when you inspect element are any of those elements greyed out because another property is overwriting them? – Frankenmint Jan 15 '20 at 08:43

score 5 · Answer 2 · answered Jul 26 '15 at 00:49

You can set the background on body tag, and add a darken layer with pseudo content with rgba() + alpha, then wrap all the content into a div and set it to position:relative, to make it stays on top.

html, body {
    height: 100%;
    margin: 0;
}
body {
    background: url("http://lorempixel.com/400/200") center center no-repeat;
    background-size: cover;
    position: relative;
}
body:before {
    content: "";
    display: block;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    transition: background .5s;
}
body:hover:before {
    /*for demo, move this line up if you want to darken it as default*/
    background: rgba(0,0,0, .5);
}
div {
    position: relative;
    color: white;
}

<div>Hello world!</div>

score 4 · Answer 3 · answered Aug 13 '20 at 03:11

4

.tile:hover{
    background-color: rgb(211, 211, 211);
    background-blend-mode: multiply;
}

This worked for me to adjust ONLY the background image on a div.

The background-color can be adjusted to make the image more or less bright.

answered Aug 13 '20 at 03:11

perryr

89
1
5

1

Found this useful for a situation where modifying HTML was not practical. – Optimae Jan 18 '21 at 18:48

score 2 · Answer 4 · answered Aug 25 '21 at 09:22

2

Using filter property

Just use,

filter: brightness(50%);

for the image to lower the brightness.

answered Aug 25 '21 at 09:22

ULIDU THEERAKE

79
4

score 1 · Answer 5 · answered Jul 26 '15 at 00:42

1

create a container div that fits 100% of #home then:

#container {
background: rgba(0, 0, 0, 0.5);
}

the 0.5 = 50% opacity...

it will have the effect of darkening the background image

answered Jul 26 '15 at 00:42

LFX

125
7

This is one of the methods I've tried. What winds up happening is it darkens the nav/ul elements instead of the background. – theblackveil Jul 26 '15 at 00:46
if you add container after body, BEFORE you do the header then there is no way that it could darkern those, unless you use something like z-index – LFX Jul 26 '15 at 00:53
@theblackveil - Can you go ahead and add all of the methods you've tried already to your question? – BSMP Jul 26 '15 at 00:54

score 1 · Answer 6 · 2015-07-26T01:31:04.617

1

First order of business: You do not need id or class on body element

and second see the code below.

body {
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url(http://adityamehta.in/wp-content/uploads/2014/08/Sky-Blue-Sky.jpg);
}

nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

nav li {
  display: inline;
  position: relative;
  float: left;
}

#slogan {
  color: #FFFAF0;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 18px;
  opacity: 0.5;
  text-align: center;
  font-weight: bold;
}

<body>
    <nav>
        <ul class="pull-left">
            <li><a href="#">Bearbeard Logo</a></li>
            <li><a href="#">World</a></li>
        </ul>

        <ul class="pull-right">
            <li><a href="#">Eretikas</a><li>
            <li><a href="#">Custom</a><li>
        </ul>

        <div id="slogan">THE HERETIC SWORD</div>
     </nav>
   </body>

Original image thanks to google :)

edited Jul 26 '15 at 01:31

answered Jul 26 '15 at 01:14

Thanks for this. I absolutely understand your first point, it was something I did in an attempt to try new things. - -; Thank you, though, I wasn't positive about it. The second point, I'm not sure I follow? What should not be inside body? I'm just trying make sure I do things right moving forward. – theblackveil Jul 26 '15 at 01:23
Thank you. Would you mind expanding on why
shouldn't be inside body? I have a section that is NOT inside the body. The
segment came from a png of "Beautiful HTML," and my thought was that it was intended to separate the nav-contents from the rest of the page. I appreciate your feedback. – theblackveil Jul 26 '15 at 01:27
Sorry my bad,
is html5 and is allowed inside a body, and I did get it confused with `` – Jul 26 '15 at 01:30

score 1 · Answer 7 · edited Apr 20 '21 at 14:12

1

You could use the background-blend-mode property and set it to darken. It would look like this

background-blend-mode:darken;

edited Apr 20 '21 at 14:12

TylerH

20,799
66
75
101

answered Jun 28 '20 at 16:28

SAMCODERING

11
3

score 0 · Answer 8 · answered Jun 20 '20 at 23:01

You could add position relative to your #home, then the following to your CSS:

#home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

(0.5 could changed depending on how dark you would like to image to be.)

Then do a z-index to bring the other content above the overlay:

#home * {
  z-index: 10; 
}

score 0 · Answer 9 · edited Apr 20 '21 at 14:11

0

You can do this:

#home {
   background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
  -webkit-background-size: cover;
    -moz-background-size:  cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

edited Apr 20 '21 at 14:11

TylerH

20,799
66
75
101

answered Apr 20 '21 at 14:09

Alexie01

101
1
7

1

This answer could benefit from an explanation. – TylerH Apr 20 '21 at 14:12
Okay, but it is true, no ? – Alexie01 Apr 21 '21 at 14:33
1

It's hard to say without an explanation. You "can" do *anything* with CSS but will it do *what you want* or *what OP asks*? – TylerH Apr 21 '21 at 15:11

How to darken a CSS background image?

9 Answers9