How to add text to an image in HTML
In this article, we will see how to add text to an image in HTML. You can insert an Image in HTML using <img> tag.
step-by-step guide to add text on image
<!DOCTYPE html>
<html>
<head>
<title>Constructor Function</title>
</head>
<style type="text/css">
.image{
width: 80%;
height: 250px;
}
.image img{
width: 100%;
}
.text{
width: 100%;
position: relative;
margin-top: -70%;
}
.text h4{
text-align: center;
color: black;
font-size: 23px;
}
</style>
<body>
<div class="image">
<img src="nature.jpg">
<div class="text">
<h4>Nature is Beauty</h4>
</div>
</div>
</body>
</html>Output:
- Create a new HTML document with (.html) extension and write the HTML basic structure.
- Then in the body, Create a <div> tag with the class name (image) and add your image inside that div using the <img> tag.
- Then create another div tag inside <div> classname (image) and write your text using any title or paragraph tag as in the above code. Finally close both <div> tags.
- In CSS, Set the width and height of the image according to your image size.
- Select your text div class using the dot operator and set the position property to relative as in the above code. And Set the margin-top property to -50% for text div.
- See the above output, the text is displayed on the image perfectly. So, you can try this method to insert text to your image in HTML.
