How to place text blocks over an image using CSS?

Learn how can we place text blocks over an image using CSS?
Submitted by Apurva Mathur, on July 27, 2022

We may have seen on many websites that some text is written over the images for example:

place text blocks over an image

Have you wondered how developers create this through CSS? In this article, we'll see how we can place any text block over an image using CSS.

To display a text over an image the main property which will help us is the position property, we have to provide the position:absolute property to the text as position:absolute property is used to set the position of an element to its parent. If we use the absolute property then the positioning of the element will not depend on its siblings or other relative elements. Which will help our text block to display over the image not under or below the image? With this simple basic property like background color, opacity, margin property is used which can be modified according to your desire.

Let us now see the code,

Example:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>HTML</title>
   </head>
   <style>
      .text{
      position: absolute;
      top: 20px;
      left: 20px;
      right: 50px;
      padding-left: 10px;
      background-color: gainsboro;
      opacity: 0.8;
      }
      img {
      width: 100%;
      height: 600px;
      }
   </style>
   <body>
      <div class="img">
         <img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="">
         <div class="text">
            <h2> Include helps welcome's you all </h2>
         </div>
      </div>
   </body>
</html>

Output:

Examples: Place text blocks over an image

Explanation: As discussed above the main property which is helping our text to display over the image is position:absolute property, this property is specifically applied to text, and using class as selector I've provided the styling, moreover I've taken two div and provided different classes to each other, this is done to uniquely identify the containers to style separately, rest each property can be neglected or can be changed according to your needs.

Tip: It is always considered a good habit to design each element using the class selector. As every element is exceptionally styled in this manner and the formation of code also looks high-quality.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.