How to darken a background using CSS?

by

Just add this code to your image css

 body{
 background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
    }

Reference: linear-gradient() – CSS | MDN

UPDATE: Not all browsers support RGBa, so you should have a ‘fallback color’. This color will be most likely be solid (fully opaque) ex:background:rgb(96, 96, 96). Refer to this blog for RGBa browser support.

More Related Contents:

  1. How to make blinking/flashing text with CSS 3
  2. How do I give text or an image a transparent background using CSS?
  3. How to change text transparency in HTML/CSS?
  4. CSS Background Opacity [duplicate]
  5. How to make in CSS an overlay over an image?
  6. How to apply an opacity without affecting a child element with html/css?
  7. Making text background transparent but not text itself
  8. How do I reduce the opacity of an element’s background using CSS?
  9. Blank Space To Right Of Webpage? (Hidden min-width?) [closed]
  10. div 100% width with other div fixed
  11. Trying to work on responsiveness of login form
  12. CSS: Width in percentage and Borders
  13. Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, …) with css?
  14. How do I get this CSS text-decoration override to work?
  15. Why does position:relative; appear to change the z-index?
  16. Align an element to bottom with flexbox
  17. Does opacity:0 have exactly the same effect as visibility:hidden
  18. Flexbox and Internet Explorer 11 (display:flex in ?)
  19. Is it possible to style a mouseover on an image map using CSS?
  20. Floating an image to the bottom right with text wrapping around
  21. HTML: Changing colors of specific words in a string of text
  22. How to change content on hover
  23. Prevent a child element from overflowing its parent in flexbox [duplicate]
  24. Why do s clear floats?
  25. Why isn’t position:sticky with left:0 working inside a scrollable container?
  26. Why does `transform` break `position: fixed`?
  27. Why do Firefox and Opera ignore max-width inside of display: table-cell?
  28. How to get ScrollBars in SVG?
  29. Blank iFrame in IE
  30. text-decoration not working for visited state link

Leave a Comment