Change brightness of background-image?

html css image background brightness
user3227878 picture user3227878 · Jan 26, 2014 · Viewed 75.5k times · Source

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

Martin Zvarík picture Martin Zvarík · Dec 21, 2017 
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.

Related questions

How to center a (background) image within a div?

Is it possible to center a background image in a div? I have tried just about everything - but no success: <div id="doit"> Lorem Ipsum ... </div> //CSS #doit { background-image: url(images/pic.png); background-repeat: none; …

Read More
onerror event using background: url()

Is there a way to show alternate image if source image is not found? I know to accomplish this is by doing something like below: <img src="imagenotfound.gif" alt="Image not found" onError="this.src='imagefound.gif';" /> …

Read More
How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More