Overlay a background-image with an rgba background-color

Question

I have a div with a background-image  I want to overlay the background-image with an rgba color  rgba 0 0 0 0 1   when the user hovers the div   I was wondering if there s a one-div solution  i e  not with multiple divs  one for the image and one for the color  etc      I tried multiple things    lt div class  the-div  id  test-1  gt  lt  div gt   lt div class  the-div  id  test-2  gt  lt  div gt   lt div class  the-div  id  test-3  gt  lt  div gt    And this CSS    the-div       background-image  url  the-image        margin  10px      width  200px      height  80px      test-1 hover       background-color  rgba 0 0 0 0 1       test-2 hover       background  url  the-image    rgba 0 0 0 0 1       test-3 hover       background  rgba 0 0 0 0 1       See this fiddle   The only option I saw is to make another image  with overlay  preload it using JavaScript and then use  the-div hover   background  url  the-new-image       However  I d like a CSS-only solution  neater  less HTTP requests  less harddisk   Is there any

User · Accepted Answer

The solution by PeterVR has the disadvantage that the additional color displays on top of the entire HTML block - meaning that it also shows up on top of div content, not just on top of the background image. This is fine if your div is empty, but if it is not using a linear gradient might be a better solution:

<div class="the-div">Red text</div>

<style type="text/css">
  .the-div
  {
    background-image: url("the-image.png");
    color: #f00;
    margin: 10px;
    width: 200px;
    height: 80px;
  }
  .the-div:hover
  {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("the-image.png");
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
  }
</style>

See fiddle. Too bad that gradient specifications are currently a mess. See compatibility table, the code above should work in any browser with a noteworthy market share - with the exception of MSIE 9.0 and older.

Edit (March 2017): The state of the web got far less messy by now. So the linear-gradient (supported by Firefox and Internet Explorer) and -webkit-linear-gradient (supported by Chrome, Opera and Safari) lines are sufficient, additional prefixed versions are no longer necessary.

User · Answer

x000D   x000D     Working method    x000D   tinted-image   x000D    background   x000D         top  transparent red  faked with gradient     x000D      linear-gradient  x000D        rgba 255  0  0  0 45    x000D        rgba 255  0  0  0 45  x000D         x000D         bottom  image    x000D      url https   upload wikimedia org wikipedia commons 7 73 Lion waiting in Namibia jpg   x000D      height  1280px  x000D      width  960px  x000D      background-size  cover  x000D    x000D   x000D   tinted-image p   x000D      color   fff  x000D      padding  100px  x000D      x000D   lt div class  tinted-image  gt  x000D     x000D     lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Laboriosam distinctio  temporibus tempora a eveniet quas  qui veritatis sunt perferendis harum  lt  p gt  x000D     x000D   lt  div gt  x000D   x000D   x000D    source  https   css-tricks com tinted-images-multiple-backgrounds

User · Answer

Yes  there is a way to do this  You could use a pseudo-element after to position a block on top of your background image  Something like this  http   jsfiddle net Pevara N2U6B   The css for the  after looks like this    the-div hover after       content           position  absolute      left  0      right  0      top  0      bottom  0      background-color  rgba 0 0 0  5       edit  When you want to apply this to a non-empty element  and just get the overlay on the background  you can do so by applying a positive z-index to the element  and a negative one to the  after  Something like this    the-div               z-index  1     the-div hover after               z-index  -1      And the updated fiddle  http   jsfiddle net N2U6B 255

User · Answer

Ideally the background property would allow us to layer various backgrounds similar to the background image layering detailed at http   www css3 info preview multiple-backgrounds   Unfortunately  at least in Chrome  40 0 2214 115   adding an rgba background alongside a url   image background seems to break the property   The solution I ve found is to render the rgba layer as a 1px 1px Base64 encoded image and inline it    the-div hover     background-image url data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII    url  the-image png        for base64 encoded 1 1 pixel images I used http   px64 net   Here is your jsfiddle with these changes made  http   jsfiddle net 325Ft 49   I also swapped the image to one that still exists on the internet

User · Answer

I ve gotten the following to work   html     background        linear-gradient rgba 0 184 255 0 45  rgba 0 184 255 0 45          url  bgimage jpg   no-repeat center center fixed    -webkit-background-size  cover    -moz-background-size  cover    -o-background-size  cover    background-size  cover      The above will produce a nice opaque blue overlay

[css] Overlay a background-image with an rgba background-color

Examples related to css

Examples related to background

Examples related to background-image

Examples related to rgba