In this tutorial we will show you the solution of image with text in HTML, in HTML we already cover how to insert image in html. Now, today our topic is that how we can write or display text over image.
It means that there is an image that is placed anywhere in browser screen. And you have to place text over image.
Hence there one more question arises that where you side of image you want to place text.
Because we don’t know where you want to display text. So, in this session we show you ways that how you are able to display text anywhere in image.
Step By Step Guide On Image With Text In HTML :-
As, here we already described that there are many positions in html where text can be placed. So, in this example we will show you that how we are able to insert text in any position.
This can be done only with the help of position tag. So, before preceding next you must have to go through our position tag article.
In this article, we use the properties of relative and absolute position. so, we hope that you may know about position tag.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="demo10/logo.jpg" alt="" style="width: 700px; height: 400px;position: relative;"> <p style="position: absolute; top: 0px; left: 0px;"> left top corner </p> <p style="position: absolute; top: 0px; left: 600px;"> right top corner </p> <p style="position: absolute; top: 390px; left: 0px;"> left bottom corner </p> <p style="position: absolute; top: 390px; left: 600px;"> right bottom corner </p> <p style="position: absolute; text-align: center; top:200px; left: 300px;"> center </p> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here, in this we insert an image with height, width and position tag with relative value. So, any that can be place on any position on image, that’s the reason we use here relative.
- After this we use paragraph tags, to insert text lines. All the tags have position absolute so that size of image does not become an issue.
- After this the remaining work is of the use of top and left. These are used to give margin from top and left respectively. You can also use bottom and right according to yours own choice.
- Now, with the help of these you are able to customize the text according to position, means the position where you want to insert text.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, here we hope that you are now able to insert text anywhere in the image. This is only done with the help of position tag and the margin given with the help of top and left.
With the help of these you are able to insert text at center of any dimension also. I hope this tutorial on image with text in HTML helps you.
About Dikshita
