How to add Background Image in CSS with Opacity and Transparency (include video in khmer)

CSS Background Image with Transparency Tutorial

Background images can be added to a webpage using CSS (Cascading Style Sheets). Here are the steps to add a background image along with some common properties and how to apply transparency effect.

In the video, not only adding image background but also adding different properties like background-size, background-repeat, and background-position along with opacity and transparency to see the effect.

1. Adding a Background Image in CSS with Properties

      div{
          width: 100%;
          height: 300px;
          padding: 15px;
          font-size: xx-large;
          margin: 10px;
          border-radius: 25px;
          color: white;          
      }
      .bg1 {
        background-image: url('image.jpg');
        background-size: 30%; /* or cover, contain */
        background-repeat: repeat; /* or no-repeat, repeat-x, repeat-y */
        background-position: center; /* or top, bottom, left, right */

      }
      

2. Adding Transparency to Background Image

This example demonstrates how to add transparency to a background image using the opacity property. (both Text and Background)

      .bg2 {
        background-image: url('image.jpg');
        background-size: 30%; /* or cover, contain */
        background-repeat: repeat; /* or no-repeat, repeat-x, repeat-y */
        background-position: center; /* or top, bottom, left, right */
        opacity: 0.5; /* Adjust the value between 0 (fully transparent) and 1 (fully opaque) */
      }
      

Note: Using the opacity property will affect the entire element, including its content (text, images, etc.). If you want to apply transparency only to the background image and not the content, you can use RGBA colors.

For example, using RGBA for background color:

      .bg3 {
      /* Black background with 50% opacity */
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("image.jpg") repeat center/30%;
      }
      

Boost your HTML skills: 🚀 HTML Tutorials in Khmer (with Video)

Download Sample Background Images: Image 1 | Image 2 | Image 3
Free Khmer Ebook Download (PDF): Database | Microsoft Access | Python Programming