Text on Image HTML

In the virtual global, conveying messages through pix is a powerful tool. Sometimes, but including textual content in an image can significantly decorate its impact and help supply a clearer message. Luckily, with HTML, integrating textual content onto pix is easy and can be carried out seamlessly.

Understanding the Basics

To embed textual content on a photograph, the usage of HTML, the <img> tag mixed with the <div> or <span> tag may be hired. These tags allow the placement of text overlays onto snapshots. By making use of CSS (Cascading Style Sheets), diverse patterns inclusive of font, length, shade, and positioning may be adjusted to supplement the photograph.

Step-by-Step Guide

1. HTML Structure

Start by setting up the basic HTML structure:

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JTP</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="image-container">
        <img src="Assets/bitcoins.jpg" alt="Your Image">
        <div class="text-overlay">
            <p>JavaTPoint</p>
        </div>
    </div>
</body>

</html>

CSS Code:

body {
    display: flex;
    justify-content: center;
  }
  
  .image-container {
    position: relative;
    display: inline-block;
  }
  
  .text-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.397);
    padding: 10px;
    text-align: center;
  }
  
  .text-overlay p {
    font-family: Arial, sans-serif;
    font-size: 5rem;
    color: #a50f0f;
    font-weight: 700;
  }

Output:

Before

After

2. Adjustments and Customization

Positioning: Use top, bottom, left, or right properties inside the .Text-overlay class to regulate the text position.
Text Styling: Modify font-own family, font size, color, and other text residences within the .Text-overlay p class.
Background Overlay: Adjust the heritage shade and opacity to create a subtle overlay in the back of the text for better readability.

3. Final Considerations

Ensure the picture course is correct (src="path_to_your_image.Jpg"), and the alt characteristic presents a descriptive alternative for the photo.

Example 1:

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JTP</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="image-container">
        <img src="Assets/bitcoins.jpg" alt="Your Image">
        <div class="text-overlay">
            <p>JavaTPoint</p>
        </div>
    </div>
</body>

</html> 

CSS Code:

body {
  display: flex;
  justify-content: center;
}

.image-container {
  position: relative;
  display: inline-block;
}

.text-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px;
  text-align: center;
}

.text-overlay p{
  font-size: 5rem;
  color: red;
} 

Output:

Before

After

Example 2:

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JTP</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="image-container">
        <img src="Assets/bitcoins.jpg" alt="Your Image">
        <div class="text-overlay">
            <h2>JavaTpoint</h2>
            <p>Best Website To learn</p>
        </div>
    </div>
</body>

</html> 

CSS Code:

body {
  display: flex;
  justify-content: center;
}
.image-container {
  position: relative;
  display: inline-block;
}

.text-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-family: Arial, sans-serif;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.349);
  z-index: 0;
}

.text-overlay h2 {
  font-size: 5rem;
  margin-bottom: 5px;
  color: black;
}

.text-overlay p {
  font-size: 3rem;
  opacity: 0.8;
  color: brown;
} 

Output:

Before

After

Advantages:

Increased Engagement: Cover text can capture interest and inspire the customer to be interested in the specific features in the image. This can lead to broader engagement and better communication of intended messages.
Brand Consistency: Adding branded textual content onto snapshots enables maintaining consistency throughout diverse marketing substances. It reinforces logo identity and popularity through the use of constant fonts, shades, and patterns.
SEO Benefits: Search engines can not study text inside photos, but adding textual content overlays lets search engines like Google and Yahoo crawl and index the textual content. This can improve SEO by using making the photo content material extra discoverable and applicable to consumer searches.

Disadvantages:

Visual Clutter: Poorly located or excessive textual content on images can cause visible clutter, reducing the overall aesthetic attraction and making it tougher for users to focus on the critical elements.
Accessibility Issues: Some users, in particular those with visual impairments or who depend upon screen readers, may additionally face difficulties in gaining access to or know-how text within pictures. Alt text can mitigate this, but it will only sometimes provide the full context.
Responsiveness Challenges: Ensuring textual content overlays remain legible and visually appealing across various display sizes and devices may be tough. Text may need to scale or reposition better, leading to a much less than foremost consumer experience.
Limited Customization: While HTML affords primary text styling options, complex designs or difficult textual content effects may require extra equipment or picture-modifying software, limiting the extent of customization to be had without delay inside HTML and CSS.
File Size Increase: Adding text overlays onto images might increase the file size, potentially impacting website loading times. Optimizing images and text can help mitigate this issue.

Conclusion

Incorporating text onto pictures the usage of HTML can extensively raise the visual enchantment and verbal exchange effectiveness of your internet content material. With simple HTML and CSS, you can easily overlay text onto pics, turning in a compelling message to your target audience.

Next TopicCorrect HTML Tag for the Largest Heading

← prev next →