css make background darker code example

Example 1: how to darken background image with css

/* Answer to: "css darken background image" */

/*
  You can use the CSS3 Linear Gradient property along with your
  background-image like the code shown below.

  Here's a link to the CSS4 Linear Gradient property:
  http://www.w3schools.com/css/css3_gradients.asp
*/

#landing-wrapper {
  display: table;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landingpagepic.jpg');
  background-position: center top;
  height: 350px;
}

Example 2: How do I make my background color darker in CSS

body {
    display: grid;
    place-items: center;
    height: 100vh;
}
div {
    width: 50vw;
    height: 50vh;
    background: linear-gradient(to bottom right, #55566a, #282834);
    border-radius: 10px;
}

Example 3: how to make background more darker with css

/* makes your image darker */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
url(your image location)

Tags:

Css Example