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 ra

Solution 1:

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.

Solution 2:

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.

Solution 3:

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.

Solution 4:

1. Create a child div for the background image of the same dimensions.
2. Set the child divs background colour with RGBA, which includes an alpha channel (opacity).
3. Set the opacity accordingly between 0 and 1. 1 = Opaque, 0=Transparent, 0.5 =Translucent

HTML:

<divid="primary_feature"><divclass="feature"></div></div>

CSS:

#primary_feature{
  background-image: url("../assets/images/misc/laptop.png");
}
.feature{
  background:rgba(0,0,0,0.6);
}

Solution 5:

An update to the other answer.

You can also use the Backdrop Filter for a much better effect. It can use any filter, in this case, the brightness filter.

This means your background will not be washed-out with a colour over the top, rather it will affect the background directly for a sharper more natural look while retaining all detail.

The downside, it isn't currently supported in Firefox, unless experimental settings are turned on. But that should change soon and as of writing this, Firefox is only 6.5% of the market.

however, it is fully supported in Chrome

body {
content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: brightness(120%);
    pointer-events: none;
}