Search code examples
htmlcssbackground-image

Tinting background image darker

I've set a background image to an element but would like to tint it so that it is darker.

I'm trying to do it with multiple background images:

.c-to-c {
    background: url('https://picsum.photos/535/250') no-repeat, rgba(0, 0, 0, .75);
    background-size: cover;
}

The black doesn't show up however, and it's displaying as though there is only the background image.

Solution

  • If I understand your question correctly, then here is an example with linear-gradient rule.

    .c-to-c {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://picsum.photos/535/250') no-repeat;
    background-size: cover;
}