X

How to add text in image html || How do I put text on a picture in HTML? || How to write text on image in html with css

You can use the CSS positioning methods in combination with the margin property to position or place the text over an image (i.e. the <img> element), in order to have text on the left or right of the image you can style your img as style=”float:left”; or style=”float:right“; If the text is too close to the image you can play with padding: 10px; or less.

HTML + CSS Source Code…

<html><head>
<style>
  .container{
   height:auto;
   position:relative;
   width:800px;
}
.container img{

    width:800px;
    display:block;
}
.one{
    position:absolute;
    top:35px;
    left:40px;
    font-size:50px;
 color:black;
}
.two{
    position:absolute;
    top:5px;
    right:5px;
    font-size:20px;
 color:black;

}
.three{
    position:absolute;
    top:130px;
    left:20px;
    font-size:21px;
 color:black;
 color:black;

}
.three1{
     position:absolute;
    top:160px;
    left:20px;
    font-size:21px;
 color:black;
 color:black;

}
.three2{
    position:absolute;
    top:190px;
    left:20px;
    font-size:21px;
 color:black;
 color:black;

}
.three3{
    position:absolute;
    top:220px;
    left:20px;
    font-size:21px;
 color:black;
 color:black;

}
.three4{
    position:absolute;
    top:250px;
    left:20px;
    font-size:21px;
 color:black;
 color:black;

}
.four{
    position:absolute;
    bottom:10px;
    left:15px;
    font-size:25px;
 color:blue;

}
.five{
    position:absolute;
    bottom:5px;
    right:5px;
    font-size:21px;
 color:black;

}
</style>
</head>
<body>
<div class="container">
       <img src="https://pin.codefind.in/mylogo/postalpincode.jpg">
      <div class="one">
      999999
       </div> 
<div class="three">
       City : Delhi
       </div>
<div class="three1">
       Post Office : Delhi
       </div>
<div class="three2">
       Block : North Delhi
       </div>
<div class="three3">
       District : North Delhi
       </div> 
<div class="three4">
       State : Delhi
       </div>     
<div class="four">
       https://pin.codefind.in/
       </div> 
</div>

 </body></html>

HTML
This source code Output:-

coding786: