PHP,HTML,CSS,JS,Wordpress,Blogger,Seo Tools,Domain,Hosting And Others Support
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>
