Breaking News: Grepper is joining You.com. Read the official announcement!

how to set color and opacity on background image in css

Uninterested Unicorn answered on December 5, 2022 Popularity 10/10 Helpfulness 4/10

answer how to set color and opacity on background image in css

related background image opacity css

how to set color and opacity on background image in css

Comment

.background {
    background:url('http://placehold.it/100x100');
    position: relative;
    height: 100px;
  width: 100px;
}

.layer {
    background-color: rgba(75, 86, 160, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Popularity 10/10 Helpfulness 4/10 Language css

Source: stackoverflow.com

Tags: background-image css opacity set

Link to this answer
Share Copy Link

Contributed on Dec 05 2022

Uninterested Unicorn

0 Answers Avg Quality 2/10

Closely Related Answers

background image opacity css

Comment

<!-- Nowadays, it is possible to do it simply
with CSS property "background-blend-mode"
and combining it with background-color -->

<div id="content">Only one div needed</div>
<style>
  div#content {
    background-image: url(my_image.png);
    /* For Light Image */
    background-color: rgba(255,255,255,0.6);
    /* For Dark Image */
    background-color: rgba(0,0,0,0.6);
    background-blend-mode: lighten;
    /* You may add things like width, height, background-size... */
  }
</style>

Popularity 10/10 Helpfulness 10/10 Language html

Source: stackoverflow.com

Tags: background-image back

Link to this answer
Share Copy Link

Contributed on Jul 29 2024

Talha Baig

0 Answers Avg Quality 2/10

how to set color and opacity on background image in css

Contents

More Related Answers

how to set color and opacity on background image in css

Closely Related Answers

background image opacity css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.