How to Place Text on the image in HTML:
There are many ways to place text over an image which are as follows :
Simple Method :
We can use "
margin" and "padding" to place text over an imageMethod 1 (Inline Style css):
Firstly create a div that specifies the dimension of the image and image url through css.
Ex :-
Next, Place the text inside. Use padding and margin on the text to get it vertically centered and also set "text-align" to "center" for it in css(inline css).
Ex :-
<head>
<title>Text over an image </title>
</head>
<body>
<div style="width:300px; height:100px; background-image:url('image.jpg');">
<p style="margin:0; padding:25px 0 0 0; text-align:center;">Text over an image</p>
</div>
</body>
<html>
Ex :- <div style="width:300px; height:100px; background-image:url('Image.jpg');">
Next, Place the text inside. Use padding and margin on the text to get it vertically centered and also set "text-align" to "center" for it in css(inline css).
Ex :- <p style="margin:0; padding:25px 0 0 0; text-align:center;">Hello World</p>
Full Code :
<html><head>
<title>Text over an image </title>
</head>
<body>
<div style="width:300px; height:100px; background-image:url('image.jpg');">
<p style="margin:0; padding:25px 0 0 0; text-align:center;">Text over an image</p>
</div>
</body>
<html>
Method 2 (Internal Style sheet):
Step 1 : Create css class named "image" which specifies the dimension of the image and image url.
Ex :-
Step 2 : Create another css class named "imageText" which specifies the dimensions for the text to be placed on the image. Use padding and margin on the text to get it
vertically centered and also set "text-align" to "center".
Ex :-
Step 3 : Create "<div>" for the image and "<p>" for the text
Ex :-
<head>
<title>Text over an image </title>
<style>
.image { width:300px; height:100px; background-image:url('image.jpg'); }
.imageText {margin:0; padding:25px 0 0 0; text-align:center; }
</style>
</head>
<body>
<div class="imgBox">
<p class="imgText">Text Over an image</p>
</div>
</body>
<html>
Ex :- .image { width:300px; height:100px; background-image:url('image.jpg'); }
Ex :- .imageText {margin:0; padding:25px 0 0 0; text-align:center; }
Step 3 : Create "<div>" for the image and "<p>" for the text
Ex :- <div class="imgBox">
<p class="imgText">Text Over an image</p>
</div>
Full Code :
<html><head>
<title>Text over an image </title>
<style>
.image { width:300px; height:100px; background-image:url('image.jpg'); }
.imageText {margin:0; padding:25px 0 0 0; text-align:center; }
</style>
</head>
<body>
<div class="imgBox">
<p class="imgText">Text Over an image</p>
</div>
</body>
<html>
Method 3 (External Style sheet):
Step 1 : Create css file named "
Ex :-
Step 2 : Create html file named "
Ex :-
image.css" which specifies the dimension of the image and image url in class named "div" and dimensions for the text to be placed on the image. Use padding and
margin on the text to get it
vertically centered and also set "text-align" to "center" in class named "p".
Ex :- image.css
.div { width:300px; height:100px; background-image:url('image.jpg'); }
.p {margin:0; padding:25px 0 0 0; text-align:center; }
Step 2 : Create html file named "
image.html" and create "<div>" for the image and "<p>" for the tex.
Ex :- <div>
<p>Text Over an image</p>
</div>
Full Code :
image.css
.div { width:300px; height:100px; background-image:url('image.jpg'); }.p {margin:0; padding:25px 0 0 0; text-align:center; }
image.html
<html>
<head>
<title>Text over an image </title>
<link rel="stylesheet" type="text/css" href="image.css">
</head>
<body>
<div>
<p>Text Over an image</p>
</div>
</body>
<html>
<head>
<title>Text over an image </title>
<link rel="stylesheet" type="text/css" href="image.css">
</head>
<body>
<div>
<p>Text Over an image</p>
</div>
</body>
<html>
Difficult Method :
We can also use "
position" and "z-index" place text over an image. There are 2 different methods in this :Method 1 :
We can use Absolute positioning and z-index= -1 :
Step 1 : Create css file named "
Ex :-
image.css" which specifies the dimension of the image, image url and z-index as -1 in class named "image" and dimensions for the text to be placed on the image. Use positon as absolute and set top and left margins as you wish on the text to get it
vertically centered and also set "text-align" to "center" in class named "imageText".
Ex :- image.css
.image {z-index: -1;width:300px; height:100px; background-image:url('bg.jpg'); }.imageText {position: relative; top:20px; left:20px; }Step 2 : Create html file named "
image.html" and create "<div>" for the image and "<p>" for the tex.
Ex :- <div class="image">
<p class="imgageText">Text Over an image</p>
</div>
Full Code :
image.css.image { z-index: +1;width:300px; height:100px; background-image:url('bg.jpg'); }.imageText {position: relative; top:20px; left:20px; }
image.html
<html><head>
<title>Text over an image </title>
<link rel="stylesheet" type="text/css" href="image.css">
</head>
<body>
<div class="image">
<p class="imageText">Text Over an image</p>
</div>
</body>
<html>
Method 2:
We can use Relative positioning and z-index= +1 :
Step 1 : Create css file named "
image.css" which specifies the dimension of the image, image url and z-index as -1 in class named "image"
and dimensions for the text to be placed on the image. Use positon as
absolute and set top and left margins as you wish on the text to get it
vertically centered and also set "text-align" to "center" in class named
"imageText".
Ex :- image.css
.image { z-index: +1;width:300px; height:100px; background-image:url('bg.jpg'); }.imageText {position: relative; top:20px; left:20px; }Step 2 : Create html file named "
image.html" and create "<div>" for the image and "<p>" for the tex.
Ex :- <div class="image">
<p class="imgageText">Text Over an image</p>
</div>
Full Code :
image.css.image { z-index: +1;width:300px; height:100px; background-image:url('bg.jpg'); } .imageText {position: relative; top:20px; left:20px; }image.html
<html>
<head>
<title>Text over an image </title>
<link rel="stylesheet" type="text/css" href="image.css">
</head>
<body>
<div class="image">
<p class="imageText">Text Over an image</p>
</div>
</body>
<html>
<head>
<title>Text over an image </title>
<link rel="stylesheet" type="text/css" href="image.css">
</head>
<body>
<div class="image">
<p class="imageText">Text Over an image</p>
</div>
</body>
<html>
No comments:
Post a Comment