how to add a background overlay in 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#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<div id="element-with-background-image">
2   <div id="color-overlay"></div>
3   ...
4</div>