Kevin Powell - Community•9mo ago

omar_ab(@om4rAb)

Can't give a background color to the image

I'm displaying and image using the

background-image

background-image

property and I also want to make the image a lil bit darker using

background-color

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)

background:color url(path)

but that didn't work too

Chris Bolson

C

Chris Bolson•4/17/25, 2:19 PM

background-color

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;

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.

ἔρως

Ἔ

ἔρως•4/17/25, 2:34 PM

or use

backdrop-filter

backdrop-filter

ἔρως

Ἔ

ἔρως•4/17/25, 2:35 PM

it can cause performance issues, but works too

ἔρως

Ἔ

ἔρως•4/17/25, 2:36 PM

or just use a pseudo-element on top of the background image, to make it darker

ἔρως

Ἔ

ἔρως•4/17/25, 2:37 PM

if you use a

<figure>

<figure>

instead of a background image, you can even take advantage of lazy loading and async decoding and support more formats and many things

ἔρως

Ἔ

ἔρως•4/17/25, 2:39 PM

by the way, you can have multiple background images too, where the 2nd image is a gradient on top of the image

ἔρως

Ἔἔρως by the way, you can have multiple background images too, where the 2nd image is ...

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 3:41 PM

that's a good idea, havent thought of it

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 3:41 PM

i will try all the solutions

ἔρως

Ἔἔρως by the way, you can have multiple background images too, where the 2nd image is ...

Chris Bolson

C

Chris Bolson•4/17/25, 3:50 PM

thats a good idea and works well, thanks!

ἔρως

Ἔ

ἔρως•4/17/25, 3:58 PM

i can try to think about more ideas, but the 2 backgrounds should be the best

ἔρως

Ἔἔρως or use `backdrop-filter`

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:17 PM

it deos not work

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:17 PM

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:17 PM

even the blend mode not working

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:18 PM

@Chris Bolson

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:18 PM

I will try the pseude element

Chris Bolson

C

Chris Bolson•4/17/25, 5:19 PM

The double background image as suggested by Epic is probably the easiest solution.

Chris Bolson

CChris Bolson The double background image as suggested by Epic is probably the easiest solutio...

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:19 PM

so I should have two images for this

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:20 PM

original one and one with dark color

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:20 PM

right?

omar_ab(@om4rAb)

Oomar_ab(@om4rAb)Click to see attachment

Jochem

J

Jochem•4/17/25, 5:20 PM

"red" isn't a blend mode though

Jochem

J

Jochem•4/17/25, 5:21 PM

like, blend modes determine how colors are mixed, you don't put colors in there

Jochem

JJochem "red" isn't a blend mode though

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:21 PM

ooh thought values are colors

Jochem

J

Jochem•4/17/25, 5:21 PM

https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

omar_ab(@om4rAb)

Oomar_ab(@om4rAb)so I should have two images for this

Chris Bolson

C

Chris Bolson•4/17/25, 5:23 PM

You don’t need 2 images. Just your image and a linear-gradient with a semi transparent color.
https://codepen.io/cbolson/pen/wBBvGXV

CodePenChris Bolson

Background image opacity using multiple background-image values

...

Jochem

JJochem <https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode>

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:23 PM

im already on it after saw ur comment hhh ty buddy

Chris Bolson

CChris Bolson You don’t need 2 images. Just your image and a linear-gradient with a semi trans...

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:23 PM

thank you chris too

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:43 PM

it worked

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:43 PM

pretty cool

omar_ab(@om4rAb)

O

omar_ab(@om4rAb)OP•4/17/25, 5:43 PM

ty @Chris Bolson again

Chris Bolson

CChris Bolson You don’t need 2 images. Just your image and a linear-gradient with a semi trans...

ἔρως

Ἔ

ἔρως•4/17/25, 5:50 PM

that is what i meant: the gradient is added as a background image on top of the other image

ἔρως

Ἔ

ἔρως•4/17/25, 5:50 PM

and it gives you a shitton of personalization

ἔρως

Ἔ

ἔρως•4/17/25, 5:51 PM

afterall, it's just a gradient

omar_ab(@om4rAb)

Oomar_ab(@om4rAb)ty @Chris Bolson again

Chris Bolson

C

Chris Bolson•4/17/25, 5:57 PM

It was Epics suggestion. I just threw a demo together.

Can't give a background color to the image - Kevin Powell - Community