How can one create an overlay in css?

by

You can use position:absolute to position an overlay inside of your div and then stretch it in all directions like so:

CSS updated *

.overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.85);
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */
    z-index:9999;
    color:white;
}

You just need to make sure that your parent div has the position:relative property added to it and a lower z-index.

Made a demo that should work in all browsers, including IE7+, for a commenter below.

Demo

Removed the opacity property from the css and instead used an rGBA color to give the background, and only the background, an opacity level. This way the content that the overlay carries will not be affected. Since IE does not support rGBA i used an IE hack instead to give it an base64 encoded PNG background image that fills the overlay div instead, this way we can evade IEs opacity issue where it applies the opacity to the children elements as well.

More Related Contents:

  1. CSS BUTTON WITH ICON [closed]
  2. Website content
  3. How do I keep two side-by-side div elements the same height?
  4. How to disable equal height columns in Flexbox?
  5. Fluid width with equally spaced DIVs
  6. Remove space (gaps) between multiple lines of flex items when they wrap
  7. How do I position one image on top of another in HTML?
  8. Position footer at bottom of page having fixed header
  9. Properly sizing and aligning the flex item(s) on the last row
  10. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  11. CSS overflow:hidden with floats
  12. Why is there a vertical scroll bar if parent and child have the same height?
  13. How to center an element in the middle of the browser window?
  14. Turn off iPhone/Safari input element rounding
  15. How do I center list items inside a UL element?
  16. Styling an anchor tag to look like a submit button
  17. Hide html horizontal but not vertical scrollbar
  18. Scrolling to an Anchor using Transition/CSS3
  19. Why does CSS not support negative padding?
  20. Can a ::before selector be used with a ?
  21. CSS data attribute new line character & pseudo-element content value
  22. CSS grid wrapping
  23. How can I create a row-based masonry layout using CSS?
  24. Selecting the last element among various nested containers
  25. Why using absolute position causes the div to be on top?
  26. what is a non-replaced inline element?
  27. Twitter Bootstrap: Center Pills
  28. When to use line breaks vs CSS positioning?
  29. Stylesheet taken-over/replaced by Chinese characters
  30. CSS: align two element, to the left and right in the same line WHITHOUT floats

Leave a Comment