Change brightness of background-image?

You can have more layers in the “background” like this:

.someObj{
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
    url(myBgImage.png);
}

This will put 50% white over the original image making it brighter.

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


Alternatively use:

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

and this is better for code maintainability.

Leave a Comment

tech