CODEWITHSUNDEEP
htmlcssbackground-image
user1049944
user1049944

Reputation:

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.

Upvotes: 1

Views: 108

Answers (4)

aokdirova
aokdirova

Reputation: 16

.c-to-c {
background-image: linear-gradient(
rgba(0, 0, 0, 0.5), 
rgba(0, 0, 0, 0.5)), 
url('/image');
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}

This syntax seems to work for the objective you described.

Upvotes: 0

s.kuznetsov
s.kuznetsov

Reputation: 15213

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;
}

Upvotes: 1

SANGEETH KUMAR S G
SANGEETH KUMAR S G

Reputation: 598

You can use the CSS filter property to apply the tint.

.c-to-c {
    background: url('https://picsum.photos/535/250') no-repeat;
    background-size: cover;
    filter: brightness(50%);
}

Upvotes: 1

noChillSunday
noChillSunday

Reputation: 56

consider using:

background-blend-mode: darken;

look up 'background-blend-mode' for its extensive list of property values

Upvotes: 0

Related Questions