How to Add a Transparent Overlay to Background Images with CSS — A Beginners Guide

Need to add a transparent overlay to an image? You’ve come to the right place. In this tutorial, I’ll teach you everything you need to know about transparent overlays, so you can take the image above, for example, and turn it into the one below.

HTML:

Create a container and add some text inside.

<div class="image-container">
   <h1>Nightlife!</h1>
</div>

CSS:

Change the color, font size, and font family. More than likely, you won’t have the Nightlife font installed in your computer. No big deal, use a different font or download the Nightlife font for free here.

body {
  color: white;
  font-size: 2rem;
  font-family: "Nightlife", sans-serif;
}

Access the image container, adjust the width and height, place the text in the center, change the font size, and use the background properties to place the image in the center of the container.

.image-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items…