How to Positioning Text Over an Image, CSS HTML

Published by StudyMuch on

Studymuch.in, Positioning Text

Positioning Text on Over Image with CSS

In this tutorial we will learn a new topic that you read in heading (Text Positioning on over an Image). It is very important and interesting point for web developer and programmer of HTML and CSS. Here we will learn, how to positioning the text on image and also see the practical programming examples.

We can position the text on over every side of the image such as top-left, top-right, center, bottom-right and bottom-left etc. To write text on image we need to used position: absolute.

Now you look below how to positioning the text on image with programming examples, we given here all programming examples with output.

Positioning Text on top-left of an Image

Now here we positioning the text on the Top Left Side of image, we used here position: absolute to accomplished the text position on image. For better understanding look programming example below.

Programming of Positioning Text on Top-left side of an Image;

<!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>Text over an Image</title>
    <style type="text/css">
        div{position: absolute;
        img{width: 400px;
           height: 200px;}
        .top-left{position: absolute;
        left: 10px;
        top: 1px;
        color:white; font-family: cursive;
        font-weight: bold; font-size: 20px;}
    </style>
</head>
<body>
    <div>
 <img src="webimage9.jpg">
 <p class="top-left">Top-left</p>
 </div>
</body>
</html>

Output of above programming example;

Positioning Text over Image

You can see above output of programming; where the text is written in top-left side of the image.

Positioning Text on Top-right of an Image

Now here we positioning the text on the Top Right Side of the image. Look below programming example for better understanding.


Programming of Positioning Text on Top-right side of an Image;

<!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>Text over an Image</title>
    <style type="text/css">
        div{position: absolute;}
        img{width: 400px;
           height: 200px;}
        .top-right{position: absolute;
        right: 10px;
        top: 0px;
        color:white; font-family: cursive;
        font-weight: bold; font-size: 20px;}
    </style>
</head>
<body>
    <div>
  <img src="webimage9.jpg">
  <p class="top-right">Top Right Text</p>
    </div>
</body>
</html>

Output of programming example;

Positioning Text over Image

You can see the output of above programming example; where the text is written in the right top side on image.

Text on Center of the Image

Here we positioning the text on center of the over an image. Text is written over an image on center of image. Look programming example for better understanding.

Programming Example, Positioning Text on Center of an Image

<!DOCTYPE 1html>
<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>Text over an Image</title>
    <style type="text/css">
        div{position: absolute;}
        img{width: 400px;
           height: 200px;}
        .center{position: absolute;
        right: 140px;
        top: 60px;
        color:white; font-family: cursive;
        font-weight: bold; font-size: 20px;}
    </style>
</head>
<body>
    <div>
  <img src="webimage9.jpg">
  <p class="center">Center Text</p>
    </div>
</body>
</html>

Output of above programming example;

Positioning Text over Image

Above you can see the output of programming example; where the text is written in the center of the image.

Positioning Text on Bottom-right of an Image

Now we positioning the text on Bottom Right Side over the image. Text is written over the bottom right side of the image. Look below programming example.

Programming Example, Text on Bottom-right of an Image;

<!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>Text over an Image</title>
    <style type="text/css">
        div{position: absolute;}
        img{width: 400px;
           height: 200px;}
        .bottom-right{position: absolute;
        right: 5px;
        bottom: 1px;
        color:white; font-family: cursive;
        font-weight: bold; font-size: 20px;}
    </style>
</head>
<body>
    <div>
<img src="webimage9.jpg">
<p class="bottom-right">Bottom Right Text</p>
    </div>
</body>
</html>

Output of above programming example;

Positioning Text over Image

Above you can see the output of programming example; the text is written on bottom right side over the image.

Positioning Text on Bottom-left of an Image

Here we positioning the text on bottom left side of the image, this is the final and last side of image here we write the text over the image on bottom left side, for better understanding look below the programming example.

Programming Example, Text on Bottom-left of an Image;

<!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>Text over an Image</title>
    <style type="text/css">
        div{position: absolute;}
        img{width: 400px;
           height: 200px;}
        .bottom-left{position: absolute;
        left: 5px;
        bottom: 1px;
        color:white; font-family: cursive;
        font-weight: bold; font-size: 20px;}
    </style>
</head>
<body>
    <div>
<img src="webimage9.jpg">
<p class="bottom-left">Bottom Left Text</p>
    </div>
</body>
</html>

Output of above programming example;

Positioning Text over Image

Above you can see the output of programming example, where the text is written on bottom left side of an image, you can write the text over an image everywhere.

Text Positioning Over an Image All Side

Here we positioning the text in all side of the image, positioning text over the image whole side in an image. We positioned all side Top-Right, Top-Left, Bottom-Right, Bottom-Left and Center in a single image, here we try to understanding through the programming example, look below the program.

Programming to positioning text on image all side;

<!DOCTYPE html>
<html>
<head>
 <title> Text Position Over an Image </title>
 <style type="text/css">
      div {position: relative;}
      p{font-weight: bold;
       font-family: cursive;
       color: white;}
       img {
         width: 100%;
         height: auto;}
      .top-left {
         position: absolute;
         top: 2px;
         left: 5px;}
      .top-right {
         position: absolute;
         top: 2px;
         right: 5px;}
      .center {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -90%);}
      .bottom-left {
         position: absolute;
         bottom: 2px;
         left: 5px;}
      .bottom-right {
         position: absolute;
         bottom: 2px;
         right: 5px;}
   </style>
</head>
<body>
   <div>
      <img src="webimage9.jpg"/>
<p class="top-left"> Top Left Side </p>
<p class="top-right"> Top Right Side </p>
<p class="center"> Centered Text  </p>
<p class="bottom-left"> Bottom Left Side</p>
<p class="bottom-right">Bottom Right Side</p>
   </div>
</body>
</html>

Output of programming example;

Positioning Text over an Image

Above you can see the programming example; where the text is denoted and written all side of an image, you see the position of text on image, so this is the positioning text over the image in all side. You can copy our programming code for understanding and using your own revision projects.

So, in this tutorial you learned how to positioning the text over an image in different places and different side of an image and you also saw the all-programming example given above in this tutorial.

I hope you have read this tutorial thoroughly, and learned something new from this tutorial.

If you have any doubt from this tutorial and you want to give any idea, you can comment in the comment section.

Read Also-


1 Comment

gate.io kullanımı · June 9, 2023 at 12:13 pm

This article opened my eyes, I can feel your mood, your thoughts, it seems very wonderful. I hope to see more articles like this. thanks for sharing.

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *