How to overlay image with color in CSS

Question

Objective I want a color overlay on this header element  How can I do this with CSS  Code  x000D   x000D   header        Original url        background  url    img bg jpg  0 0 no-repeat fixed      background  url https   fakeimg pl 250x100   0 0 no-repeat fixed    height  100     overflow  hidden    color   FFFFFF   x000D   lt header id  header  gt     lt div class  row  gt       lt div class  col-xs-12  gt                 lt  div gt     lt  div gt   lt  header gt  x000D   x000D   x000D

User · Answer

You may use negative superthick semi-transparent border...

_x000D_

.red {_x000D_
    outline: 100px solid rgba(255, 0, 0, 0.5) !important;_x000D_
    outline-offset: -100px;_x000D_
    overflow: hidden;_x000D_
    position: relative;_x000D_
    height: 200px;_x000D_
    width: 200px;_x000D_
}

_x000D_

<div class="red">Anything can be red.</div>_x000D_
<h1>Or even image...</h1>_x000D_
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="red"/>

_x000D_

This solution requires you to know exact sizes of covered object.

User · Answer

You could use the hue-rotate function in the filter property  It s quite an obscure measurement though  you d need to know how many degrees round the colour wheel you need to move in order to arrive at your desired hue  for example   header       filter  hue-rotate 90deg       Once you d found the correct hue  you could combine the brightness and either grayscale or saturate functions to find the correct shade  for example   header       filter  hue-rotate 90deg  brightness 10   grayscale 10        The filter property has a vendor prefix in Webkit  so the final code would be   header     -webkit-filter  hue-rotate 90deg  brightness 10   grayscale 10              filter  hue-rotate 90deg  brightness 10   grayscale 10

User · Answer

If you want to just add a class to add the overlay      x000D   x000D  span   x000D    padding  5px  x000D    x000D   x000D   green   x000D    background-color  green  x000D    color   FFF  x000D    x000D   x000D   overlayed   x000D    position  relative  x000D    x000D   x000D   overlayed  before   x000D    content       x000D    z-index  1  x000D    position  absolute  x000D    top  0  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    background-color   00000080  x000D    x000D   x000D   stand-out   x000D    position  relative  x000D    z-index  2  x000D    x000D   lt span class  green overlayed  gt with overlay lt  span gt  x000D   lt span class  green  gt without overlay lt  span gt  x000D   lt br gt  x000D   lt br gt  x000D   lt span class  green overlayed  gt  x000D     lt span class  stand-out  gt I stand out lt  span gt  x000D   lt  span gt  x000D   x000D   x000D    Important  the element you put the overlayed class on needs to have a position set  If it doesn t  the   before element will take the size of some other parent element  In my example I ve set the position to  relative  via the  overlayed rule  but in your use case you might need  absolute  or some other value     Also  make sure that the z-index of the overlayed class is higher than the ones of the eventual child elements of the container  unless you actually want for those to  stand out  and not be overlayed  as with the span with the stand-out class  in my snippet

User · Answer

You can do that in one line of CSS    background  linear-gradient to right   3204fdba   9907facc   url https   picsum photos 1280 853  random 1  no-repeat top center   Also hover on the color in VS Code  and click on the color to be a hex color  and you can change the colors opacity easy  instead of the rgba  rgba 48  3  252  0 902   rgba 153  7  250  0 902    It can be short to   3204fde6   9907fae6    x000D   x000D  header     height  100vh     color  white     font  bold 2em 2em monospace     display  flex     justify-content  center     align-items  center       background  linear-gradient to right  3204fdba   9907facc   url https   picsum photos 1280 853  random 1  no-repeat top center    x000D   lt header gt is simply dummy text of the printing and lt br gt  typesetting industry  lt  header gt  x000D   x000D   x000D   See here CodePen

User · Answer

In helpshift  they used the class home-page as HTML  lt div class  quot page home-page quot  gt     lt  div gt   CSS  home-page       background  transparent url  quot    images backgrounds image-overlay png quot   repeat 0 0      background  rgba 39 62 84 0 82       overflow  hidden      height  100       z-index  2     you can try similar like this

User · Answer

If you don t mind using absolute positioning  you can position your background image  and then add an overlay using opacity    div       width 50px      height 50px      background    url  http   images1 wikia nocookie net   cb20120626155442 adventuretimewithfinnandjake images 6 67 Link gif        position absolute      left 0      top 0      overlay      background red     opacity  5      See here  http   jsfiddle net 4yh9L

User · Answer

You should use rgba for overlaying your element with photos rgba is a way to declare a color in CSS that includes alpha transparency support  you can use  row as an overlayer like this   header       background  url    img bg jpg  0 0 no-repeat fixed      height  100       overflow  hidden      color   FFFFFF      row      background  rgba 39 62 84 0 82       overflow  hidden      height  100       z-index  2

User · Answer

Use mutple backgorund on the element  and use a linear-gradient as your color overlay by declaring both start and end color-stops as the same value   Note that layers in a multi-background declaration are read much like they are rendered  top-to-bottom  so put your overlay first  then your bg image    header     background       linear-gradient to bottom  rgba 100  100  0  0 5   rgba 100  100  0  0 5   cover      url    img bg jpg  0 0 no-repeat fixed    height  100     overflow  hidden    color   FFFFFF

User · Answer

You can also add an additional class with such settings  Overlay will not overlap content and no additional tag is needed   overlay     position  relative    z-index  0      overlay  after       content          position  absolute      top  0      left  0      width  100       height  100       background  red      opacity   6                    z-index  -1      https   codepen io zeroox003 pen yLYbpOB

User · Answer

header overlay       background-color  SlateGray      position relative      width  100       height  100       opacity  0 20      -moz-opacity  20       -webkit-opacity  20       z-index  2      Something like this  Just add the overlay class to the header  obviously

User · Answer

Here s a creative idea using box-shadow   header       background-image  url  quot apple jpg quot        box-shadow  inset 0 0 99999px rgba 0  120  255  0 5      What s happening  The background sets the background for your element   The box-shadow is the important bit  It basically sets a really big shadow on the inside of the element  on top of the background  that is semi-transparent

[html] How to overlay image with color in CSS?

Examples related to html

Examples related to css

Examples related to overlay