user3227878 user3227878 - 5 months ago 9
HTML Question

Change brightness of background-image?

I am wondering if it is possible to change the brightness of:

body{
background-image:url();
}


Using HTML/CSS. The reason I would like to change it, is because I just spent a rather long time making the image, but when I put it on website, it is suddenly about twice as bright. I have compared the original file and the file that is input into the website and they are both very much different colours of blue.

Is there any reason for this, and is there a way I can change the brightness?

Thanks.

Answer

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.