How to create an image with a transparent background text using CSS?


We can easily create an image with a transparent background text. Set a black background with 0.5 opacity using the CSS background property. Position this using the position property and place to the bottom of an image. Place the text there i.e., a transparent background text on an image. Let us see how to create an image with a transparent background text with HTML and CSS.

Set an image container

An image container is set and within that the image and some content is shown. This content goes to the bottom −

<div class="imageContainer">
   <img src="https://www.tutorialspoint.com/static/images/home/hero-banner.png">
   <div class="imageContent">
      <h1>A Man</h1>
      <h3>A man sitting on a chair with a laptop.</h3>
   </div>
</div>

Position the image container

To set the image container, use the position property with the value relative −

.imageContainer {
   display: inline-block;
   position: relative;
}

Position the content on the image

The content on the image is positioned using the position property with the value absolute. The content is at the bottom of the image; therefore, the bottom property is set to the value 0 −

.imageContent {
   position: absolute;
   bottom: 0;
   background: rgba(29, 6, 43, 0.5);
   color: #f1f1f1;
   width: 100%;
   padding: 20px;
}

Example

The following is the code to create an image with transparent background text using CSS −

<!DOCTYPE html>
<html>
<head>
   <style>
      * {
         box-sizing: border-box;
      }
      body {
         font-family: Arial;
         font-size: 17px;
      }
      .imageContainer {
         display: inline-block;
         position: relative;
      }
      .imageContent {
         position: absolute;
         bottom: 0;
         background: rgba(29, 6, 43, 0.5);
         color: #f1f1f1;
         width: 100%;
         padding: 20px;
      }
   </style>
</head>
<body>
   <h2>Image with Transparent Text</h2>
   <div class="imageContainer">
      <img src="https://www.tutorialspoint.com/static/images/home/hero-banner.png">
      <div class="imageContent">
         <h1>A Man</h1>
         <h3>A man sitting on a chair with a laptop.</h3>
      </div>
   </div>
</body>
</html>

Updated on: 14-Dec-2023

433 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements