//OverLay. ( 1st Way ) .parent { background: url("./folder1/img.jpg') no-repeat center center/cover; } .child { background-color : rgba(0,0,0,0.5); //It will add Black ( required ) layer on the top of the parent-Background Image. } ------------------------------------------------------------------------ //BackgroundImage, Adding Layer on the top of the Image. ( 2nd Way ) // Adding Image and providing Layer on that specific background only. .selectContainer { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.377), rgba(0,0,0, 100) ),url(/r/featured.jpg) no-repeat center center/cover; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter