Semi-transparent color layer over background-image?

by

I know this is a really old thread, but it shows up at the top in Google, so here’s another option.

This one is pure CSS, and doesn’t require any extra HTML.

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

There are a surprising number of uses for the box-shadow feature.

More Related Contents:

  1. How to add a color overlay to a background image? [duplicate]
  2. CSS: background image on background color
  3. How to apply a CSS filter to a background image
  4. Using percentage values with background-position on a linear-gradient
  5. How do I combine a background-image and CSS3 gradient on the same element?
  6. Can I have multiple background images using CSS?
  7. Responsive css background images
  8. Background color of text in SVG
  9. How can I force browsers to print background images in CSS?
  10. Changing Background Image with CSS3 Animations
  11. Is embedding background image data into CSS as Base64 good or bad practice?
  12. IE 8: background-size fix [duplicate]
  13. CSS background-size: cover + background-attachment: fixed clipping background images
  14. How to rotate the background image in the container?
  15. Using HTML data-attribute to set CSS background-image url
  16. What is the difference between background and background-color
  17. Google Chrome Extensions – Can’t load local images with CSS
  18. Disable antialising when scaling images [duplicate]
  19. Is background-color:none valid CSS?
  20. CSS blur on background image but not on content [duplicate]
  21. Background with 2 colors in JavaFX?
  22. Symfony2 – Assetic – load images in CSS
  23. Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
  24. Is it possible to change only the alpha of a rgba background colour on hover?
  25. Overlay a background-image with an rgba background-color
  26. Animate CSS background-position with smooth results (sub-pixel animation)
  27. Full background image with fade effect
  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