How to put text over an image

Overlaying text on images is a common design technique that can enhance the visual appeal of your web pages. Whether you want to add captions, titles, or any other text, there are several methods to achieve this effect using HTML and CSS. In this article, we'll explore different techniques to put text over an image.

Using Bootstrap

Bootstrap provides utility classes to easily overlay text on an image.

• Use Bootstrap's Flexbox utility classes d-flex, align-items-center, and justify-content-center to center the text over the image.

        
            
      <div 
        class="bg-image d-flex justify-content-center align-items-center" 
        style="background-image: url('...');
        height: 30vh;
        ">
        <h1 class="text-white">Page title</h1>
      </div>
          
        
    

Using CSS Positioning

One of the most common methods to overlay text on an image is by using CSS positioning. This method involves placing the image and text within a container and using the position property to layer the text over the image.

• The container div is used to position the image and text relative to each other.
• The image is set to be responsive within the container.
• The text is absolutely positioned at the center of the image using top, left, and transform properties.

Overlay Text

        
            
        <div style="position: relative; width: 100%; max-width: 400px;">
          <img src="image.jpg" alt="Sample Image" style="width: 100%; height: auto;">
          <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; font-weight: bold; text-align: center;">
            Overlay Text
          </div>
        </div>
          
        
    

Using CSS Flexbox

Flexbox can also be used to center text over an image easily and responsively.

• The container div uses Flexbox to center the text over the image.
• The justify-content and align-items properties center the text horizontally and vertically.
• The text is absolutely positioned to ensure it stays on top of the image.

Overlay Text

        
            
        <div style="position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 400px;">
          <img src="image.jpg" alt="Sample Image" style="width: 100%; height: auto;">
          <div style="position: absolute; color: white; font-size: 24px; font-weight: bold; text-align: center;">
            Overlay Text
          </div>
        </div>

          
        
    

Using CSS Grid

CSS Grid provides a flexible way to layer text over an image.

• The container div uses CSS Grid to overlay the text on the image.
• Both the image and text are placed in the same grid area using grid-area: 1/1;.
• The place-self: center; property centers the text within the grid area.

Overlay Text

        
            
        <div style="display: grid; position: relative; width: 100%; max-width: 400px;">
          <img src="image.jpg" alt="Sample Image" style="grid-area: 1/1; width: 100%; height: auto;">
          <div style="grid-area: 1/1; place-self: center; color: white; font-size: 24px; font-weight: bold; text-align: center;">
            Overlay Text
          </div>
        </div>