How to make the background-image darker, without "Darking" other images in the same div?

Question

I'm creating a header where the background-image is dark while the other images on the header are bright. How do I make the background-image dark without dark the other images in the header?

Basically, **you can't**. A background image is not an element, it's a property. — Paulie_D, Apr 24 '19 at 14:08
there might be a trick using a pseudo `::before` and giving it a `z-index: 0;` and to rest of the child wrap `z-index: 1;` — Joykal Infotech, Apr 24 '19 at 14:10
https://stackoverflow.com/questions/23208200/how-to-darken-a-background-using-css — Paulie_D, Apr 24 '19 at 14:11

score 0 · Answer 1 · answered Apr 24 '19 at 14:12

0

As @Paulie_D wrote, you can't really. But I suggest you simply duplicate and edit the original image file (making it darker) and use that version as your background image.

answered Apr 24 '19 at 14:12

Johannes

64,305
18
73
130

score 0 · Answer 2 · answered Apr 24 '19 at 14:19

This is the method I have been using for a while.

body {
  position: relative;
  width: 100%;
  height: 100VH;
  background: url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png);
}

body::before {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .4);
  content: '';
}

How to make the background-image darker, without "Darking" other images in the same div?

2 Answers2