background overlay css

1html {
2  min-height:100%;
3  background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);
4  background-size:cover;
5}
6

1.testclass {
2    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
3    background-blend-mode: overlay;
4}
5

1html {
2  background:url(http://lorempixel.com/800/600/nature/2);
3  background-size:cover;
4  box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
5}

1#element-with-background-image {
2   position: relative;
3   background-image: url("//spin.atomicobject.com/wp-content/uploads/20170324102432/portfolio-tips-feature-image.jpg");
4}
5 
6#color-overlay {
7   position: absolute;
8   top: 0;
9   left: 0;
10   width: 100%;
11   height: 100%;
12   background-color: black;
13   opacity: 0.6;
14}

1.header {
2  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
3}

1.image:before{
2    content: "";
3    background: rgba(0,0,0,.6);
4    position: absolute;
5    top: 0;
6    left: 0;
7    right: 0;
8    bottom: 24px;
9}