Can't give a background color to the image
I'm displaying and image using the
background-image property and I also want to make the image a lil bit darker using background-color
here's the picture(left one)
and here's how I want it to look like (right pic)
I also tried
background:color url(path) but that didn't work too
19 Replies
background-color won't affect the image in any way. It will only work if the image itself has some opacity and the background-color is allowed to show through.
Unfortunately it is not possible to set opacity directly on the background image.
You could try using blend-mode: background-blend-mode: lighten; but that might work or be enough for your needs.
Alteratively you could add the image via a pseudo element, placing it above the background but behind the content and give it (the pseudo element) an opacity.or use
backdrop-filter
it can cause performance issues, but works too
or just use a pseudo-element on top of the background image, to make it darker
if you use a <figure> instead of a background image, you can even take advantage of lazy loading and async decoding and support more formats and many things
by the way, you can have multiple background images too, where the 2nd image is a gradient on top of the imagethat's a good idea, havent thought of it
i will try all the solutions
thats a good idea and works well, thanks!
i can try to think about more ideas, but the 2 backgrounds should be the best
it deos not work
even the blend mode not working
@Chris Bolson
I will try the pseude element
The double background image as suggested by Epic is probably the easiest solution.
so I should have two images for this
original one and one with dark color
right?
"red" isn't a blend mode though
like, blend modes determine how colors are mixed, you don't put colors in there
ooh thought values are colors
You don’t need 2 images. Just your image and a linear-gradient with a semi transparent color.
https://codepen.io/cbolson/pen/wBBvGXV
im already on it after saw ur comment hhh ty buddy
thank you chris too
it worked
pretty cool
ty @Chris Bolson again
that is what i meant: the gradient is added as a background image on top of the other image
and it gives you a shitton of personalization
afterall, it's just a gradient
It was Epics suggestion. I just threw a demo together.