How to add a color overlay to a background image

Question

I have seen this question a lot both on SO and the Web  But none of them has been what I am looking for   How do I add a color-overlay to a background image using CSS only   Example HTML    lt div class  testclass  gt   lt  div gt    Example CSS    testclass       background-image  url     img img jpg        Please note    I want to solve this by only using CSS  i e I do NOT want to add a child div within the div  testclass  for the color overlay  This should not be a  hover effect  I want to simply just add a color-overay to the background image  I want to be able to use opacity i e  I am looking for a solution that allows RGBA color  I am looking for just one color  lets say black  Not a gradient    Is this possible   I would be surprised if not  but I have not been able to find anything about this   and if so what the best way to accomplish this    All suggestions and advice are appreciated

User · Answer

background-image takes multiple values   so a combination of just 1 color linear-gradient and css blend modes will do the trick    testclass       background-image  url     images image jpg    linear-gradient rgba 0 0 0 0 5  rgba 0 0 0 0 5        background-blend-mode  overlay      note that there is no support on IE Edge for CSS blend-modes at all

User · Answer

You can use a pseudo element to create the overlay    testclass     background-image  url     img img jpg      position  relative     testclass before     content        position  absolute    left  0  right  0    top  0  bottom  0    background  rgba 0 0 0  5

User · Answer

Try this  it s simple and clear  I have found it from here   https   css-tricks com tinted-images-multiple-backgrounds    tinted-image      width  300px    height  200px     background          top  transparent red         linear-gradient        rgba 255  0  0  0 45          rgba 255  0  0  0 45                bottom  image        url https   s3-us-west-2 amazonaws com s cdpn io 3 owl1 jpg

User · Answer

I see 2 easy options    multiple background with a translucent single gradient over image huge inset shadow    gradient option   html     min-height 100     background linear-gradient 0deg  rgba 255  0  150  0 3   rgba 255  0  150  0 3    url http   lorempixel com 800 600 nature 2     background-size cover      shadow option   html     min-height 100     background url http   lorempixel com 800 600 nature 2     background-size cover    box-shadow inset 0 0 0 2000px rgba 255  0  150  0 3       an old codepen of mine with few examples    a third option    with background-blen-mode       The background-blend-mode CSS property sets how an element s background images should blend with each other and with the element s background color     html     min-height 100     background url http   lorempixel com 800 600 nature 2  rgba 255  0  150  0 3     background-size cover    background-blend-mode  multiply

[css] How to add a color overlay to a background image?

Examples related to css

Examples related to background-image

Examples related to background-color