Change brightness of background-image?

There is no way to do this that works in every browser, but if you want, you can do it in webkit browsers (Chrome, Safari, Opera), by using the filter style:

img.lessBright {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
}

That results in the brightness being reduced to 80% in webkit browsers. I do recommend just saving another version of your image if you want to do this though.

This would be an option, but it's not very practical and wouldn't work in older browsers:

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: rgba(0,0,0,0.1);
  pointer-events: none;
}

Or for even better color control, try hsla() colors:

body:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: hsla(180,0%,50%,0.25);
  pointer-events: none;
}

Really, it's better to play with the image in a image editor until you get the browser result you want.

background:linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(myimage.png);

This will put 50% white over the original image.

Linear-gradient function has to be used, otherwise it doesn't work.

---

Or you can use:

.someObj:after{ content:''; background:rgba(255,255,255,.5); .... }

and this is better for code maintainability.