Background image darken

I Need Help
1

Hi, i have a header image with text in front of. now i would like to change the brightness of the image but not the text.
this will darken everything in the bloc:

.img {
filter: brightness(80%);
}

Anyone has a solution? Thanks guys.

2

Hi Ralf,

Maybe I have missed a point here, but can’t you just use the dark texture from the list?

3

hey eldar, no because this is too dark. I would like to change every image different.

4

Hi

You could then probably set the text with an overlay class to avoid it from being darken.

Is the text also used as a link or simply a caption ?

MDS

5

it is just a background image and a h1 and h2 text

6

I found this solution:

.img:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
}
.text {
    color: #FFF;
}

it works, but there is a better solution may be.

1 Like
7

Great.

From what I know all children inherit the css style of their parent by default. Thus, you either need to play with relative and absolute positions or with before and after. Interesting though you did not need to set a z-index.

MDS

8

I’m agree @MDS
the code is good, because you can change the color of the image. :slight_smile:

1 Like
9

Thank you - I’ll maybe need it some day. :wink:

MDS

1 Like