CssHow-ToBeginner · 3 min read

How to Set Background Overlay in CSS: Simple Guide

To set a background overlay in CSS, use a pseudo-element like ::before or ::after with position: absolute and a semi-transparent background-color. Place it over the background image inside a relative container to create the overlay effect.

📐

Syntax

You create a background overlay by adding a pseudo-element (::before or ::after) inside a container with position: relative. The overlay uses position: absolute to cover the entire container and a background-color with transparency (using rgba or opacity).

position: relative; on the container sets the reference for the overlay.
::before or ::after creates the overlay layer.
position: absolute; and top: 0; left: 0; right: 0; bottom: 0; make the overlay cover the container fully.
background-color: rgba(0, 0, 0, 0.5); adds a semi-transparent black overlay.
z-index controls layering order.

css

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}
.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

💻

Example

This example shows a container with a background image and a semi-transparent black overlay using ::before. The overlay dims the image so text on top is easier to read.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Background Overlay Example</title>
<style>
  .container {
    position: relative;
    width: 400px;
    height: 250px;
    background-image: url('https://via.placeholder.com/400x250');
    background-size: cover;
    background-position: center;
    color: white;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
  }
  .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }
  .container > span {
    position: relative;
    z-index: 2;
  }
</style>
</head>
<body>
  <div class="container">
    <span>Overlay Text</span>
  </div>
</body>
</html>

Output

A 400x250 pixel box showing a background image dimmed by a semi-transparent black overlay with white text 'Overlay Text' centered on top.

⚠️

Common Pitfalls

Common mistakes when setting background overlays include:

Not setting position: relative on the container, so the overlay does not position correctly.
Forgetting to add content: ''; in the pseudo-element, so it does not appear.
Overlay covering text or content because of incorrect z-index layering.
Using opacity on the container instead of the overlay, which makes all content transparent.

css

.container {
  /* Missing position: relative; */
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
}
.container::before {
  /* Missing content property */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Corrected version */
.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
}
.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

📊

Quick Reference

Use position: relative on the container.
Create overlay with ::before or ::after pseudo-element.
Set overlay to position: absolute and cover full container.
Use background-color: rgba() for transparency.
Manage layering with z-index.

✅

Key Takeaways

Use a pseudo-element with absolute positioning inside a relative container for overlays.

Set a semi-transparent background color with rgba() to create the overlay effect.

Always include content: '' in pseudo-elements to make them visible.

Control layering with z-index to keep overlay behind text.

Avoid using opacity on the container to prevent making all content transparent.