Image with CSS Transparent Color Overlay Here we just need to add the linear-gradient property within the background style followed by the url property we already had in place. CSS gradients allow us to display smooth transitions between two or more colors. 20, Jun 20. Step-by-step guide to using high-resolution, transparent layer of patterns like dots, lines, stripes on backgrounds of low-quality image or video. CSS Backgrounds and Borders Module Level 3 The definition of 'background-image' in that specification. If you include multiple items with the background-image property, it will stack them, with the first listed item on top. For the background image, it is defined as background-size: cover;. To fix this, your overlay and your content will need to have a z-index applied to them. Often, we have background images that we put text on top of. This method doesn’t need extra HTML elements and it works in all modern browsers. .image-box{background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url);} The first background image is a linear gradient that goes from and to the same color. My code creates an overlay where it blocks up the page with black, and there's a form inside of inner container. Several Javascript libraries have come to fill this gap, especially Lightbox. See the Pen Playing with background image overlays by Máté Végh on CodePen.