how to add an overlay to an image in css code example

Example 1: How to overlay image with color in CSS?

background: linear-gradient(#3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;

Example 2: make background overlay css

#element-with-background-image {
   position: relative;
   background-image: url("//spin.atomicobject.com/wp-content/uploads/20170324102432/portfolio-tips-feature-image.jpg");
}
 
#color-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: black;
   opacity: 0.6;
}