CSS Background Image with Opacity and Transparency with video example in Khmer

Hello everyone! Today we learn how to use background image with opacity and transparency in CSS. This technique make your website look more professional and beautiful. Let get start!

👉 If you want learn more CSS trick, check out: CSS Tips and Tricks with Examples

1. Basic Background Image

First, let understand how background-image work in CSS. You can set any image URL as background of element!

.hero {
  width: 100%;
  height: 400px;
  background-image: url("https://cdn.dev.rean.me/css/css%20Background%20image%201.jpg");
  background-size: cover;      /* fill entire box */
  background-position: center; /* center the image */
  background-repeat: no-repeat;
}

💡 Tip: background-size: cover make image fill whole box and crop if need. contain make image fit inside without crop. Use cover for hero section, contain for logo!

2. Background Image with `opacity` Property

The simplest way to make background transparent is use opacity property. But be careful — it make everything transparent, not just image!

.box {
  background-image: url("https://cdn.dev.rean.me/css/css%20Background%20image%201.jpg");
  background-size: 30%;
  background-repeat: repeat;
  opacity: 0.5; /* 50% transparent — text ALSO become transparent! */
}

💡 Tip: opacity affect the whole element including text and child element. If you want only background transparent but text stay solid, use method below instead!

3. Background Image with `linear-gradient` Overlay (Best Method!)

This is the best way to add opacity to background image. Use linear-gradient with rgba() color on top of image. Text stay 100% visible!

.bg1 {
  width: 800px;
  height: 500px;
  color: white;
  font-size: 40px;
  padding: 20px;
  border-radius: 25px;

  /* Dark overlay on top of image */
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("https://cdn.dev.rean.me/css/css%20Background%20image%201.jpg");
  background-size: 30%;
  background-repeat: repeat;
}

How it work:

linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) — create dark overlay with 60% opacity
rgba(0, 0, 0, 0.6) — black color with 0.6 opacity (0 = invisible, 1 = fully solid)
The gradient is layer on top of the image

💡 Tip: Change the 0.6 number to control darkness. 0.3 = light overlay (can see image clearly). 0.8 = very dark overlay (image barely visible). Try different value to find what look best!

4. Background Shorthand with Gradient Overlay

You can write background property in one line using shorthand. More compact!

.bg2 {
  /* Shorthand: gradient overlay + image URL + repeat + position / size */
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
    url("https://cdn.dev.rean.me/css/css%20Background%20image%202.jpg") repeat top left / 30%;

  border-radius: 1rem;
  color: white;
  text-transform: capitalize;
  font-size: 3rem;
  padding: 0.5rem;
}

Shorthand breakdown:

url("...") — image source
repeat — repeat the image
top left — position
/ 30% — size (the / separate position from size)

💡 Tip: Notice the gradient use different opacity at top and bottom: rgba(0,0,0, 0.5) at top and rgba(0,0,0, 0.7) at bottom. This create nice fade effect — top lighter, bottom darker!

5. Background Image Without Overlay

Sometimes you want background image without any dark overlay. Just use url() directly!

.bg3 {
  background: url("https://cdn.dev.rean.me/css/css%20Background%20image%203.jpg") repeat center / 25%;

  border-radius: 1rem;
  color: rgb(0, 0, 0); /* dark text for light background */
  text-transform: capitalize;
  font-size: 3rem;
  padding: 0.5rem;
}

💡 Tip: If background image is light, use dark text color like rgb(0, 0, 0). If background is dark, use white text. Always make sure text is readable!

6. Using `::before` Pseudo-Element for More Control

For maximum control, you can use ::before pseudo-element to create overlay. This way you can add animation, blur, and more!

.hero {
  position: relative;
  background: url("https://cdn.dev.rean.me/css/css%20Background%20image%201.jpg") center / cover no-repeat;
  min-height: 500px;
  color: white;
}

/* Dark overlay using ::before */
.hero::before {
  content: "";
  position: absolute;
  inset: 0; /* same as top:0 right:0 bottom:0 left:0 */
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* Make sure content stay above overlay */
.hero > * {
  position: relative;
  z-index: 2;
}

💡 Tip: ::before method is most flexible! You can add backdrop-filter: blur(4px) to create frosted glass effect, or add transition to animate the overlay on hover!

Full Example Code

Here is the complete HTML + CSS code from the video tutorial using real sample images. You can copy and try in your browser!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS Background Image with Opacity</title>
  <style>
    div {
      width: 800px;
      height: 500px;
      color: white;
      font-size: 40px;
      padding: 20px;
      border-radius: 25px;
      margin: 10px;
    }

    /* Method 1: Gradient overlay with separate properties */
    .bg1 {
      background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("https://cdn.dev.rean.me/css/css%20Background%20image%201.jpg");
      background-size: 30%;
      background-repeat: repeat;
    }

    /* Method 2: Gradient overlay with shorthand */
    .bg2 {
      background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
        url("https://cdn.dev.rean.me/css/css%20Background%20image%202.jpg") repeat top left / 30%;
      border-radius: 1rem;
      text-transform: capitalize;
      font-size: 3rem;
      padding: 0.5rem;
    }

    /* Method 3: No overlay */
    .bg3 {
      background: url("https://cdn.dev.rean.me/css/css%20Background%20image%203.jpg") repeat center / 25%;
      border-radius: 1rem;
      color: rgb(0, 0, 0);
      text-transform: capitalize;
      font-size: 3rem;
      padding: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="bg1">Background image repeat with opacity & Transparency</div>
  <div class="bg2">Background image with shorthand property</div>
  <div class="bg3">Background image with cover</div>
</body>
</html>

Video Tutorial

Watch this video tutorial in Khmer language for step-by-step guide:

Quick Summary

Method	Pros	Cons
`opacity: 0.5`	Simple, one line	Text also become transparent ❌
`linear-gradient()` overlay	Text stay solid ✅, easy to control	Need write gradient code
`::before` pseudo-element	Most flexible, can animate	More CSS code to write

💡 Tip: For most case, use linear-gradient() overlay method (Method 3). It simple, text stay readable, and work everywhere. Use ::before only when you need animation or blur effect!

🖼️ Sample Images for Practice

You can click to view or download these 3 sample images in a new tab:

⬇️ Download Sample Image 1 ⬇️ Download Sample Image 2 ⬇️ Download Sample Image 3

That all for today! Background image with opacity is very common technique in web design. You see it in hero section, card, banner everywhere. Practice with different opacity value and you will master it fast! 🎉