Overlay a background-image with an rgba background-color

by

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.

More Related Contents:

  1. Using percentage values with background-position on a linear-gradient
  2. CSS3 background image transition
  3. CSS: background image on background color
  4. How to apply a CSS filter to a background image
  5. Can I have multiple background images using CSS?
  6. Stretch and scale a CSS image in the background – with CSS only
  7. Can I set an opacity only to the background image of a div?
  8. How to get div height to auto-adjust to background size?
  9. Semi-transparent color layer over background-image?
  10. How to reference JSF image resource as CSS background image url
  11. Changing Background Image with CSS3 Animations
  12. How to add a color overlay to a background image? [duplicate]
  13. CSS hexadecimal RGBA?
  14. How to rotate the background image in the container?
  15. How to scale CSS sprites when used as background-image?
  16. Error: CSS: background: / is an incorrect operator
  17. Google chrome a:visited background image not working
  18. Why does the linear-gradient disappear when I make an element position:absolute?
  19. Cross browser way to rotate image using CSS?
  20. Convert 8-digit hex colors to rgba colors?
  21. Symfony2 – Assetic – load images in CSS
  22. Background images: how to fill whole div if image is small and vice versa
  23. div background color, to change onhover
  24. Is it possible to change only the alpha of a rgba background colour on hover?
  25. Animate CSS background-position with smooth results (sub-pixel animation)
  26. Full background image with fade effect
  27. Fixed gradient background with css
  28. CSS: background image does not fill when scrolling
  29. CSS background image URL failing to load
  30. Issues with “background-position” in “background” shorthand property

Leave a Comment