How To Add Text Over An Image Using HTML and CSS?


First of all create a <div class="box">...</div> in the HTML document.
Then add this HTML code between <div class="box">...</div>.
<div class="box">
    <img src="image.png" alt="image">
    <div class="center">Center Text</div>
    <div class="top-left">Top-Left Text</div>
    <div class="top-right">Top-Right Text</div>
    <div class="bottom-right">Bottom-Right Text</div>
    <div class="bottom-left">Bottom-Left Text</div>
</div>


Add this CSS code.
.box {
   position: relative;
   color: rgb(255,255,255);
 }
.center{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}
.top-left{
   position: absolute;
   top: 10px;
   left: 10px;
}
.top-right{
   position: absolute;
   top: 10px;
   right: 10px;
}
.bottom-right{
   position: absolute;
   bottom: 10px;
   right: 10px;
}
.bottom-left{
   position: absolute;
   bottom: 10px;
   left: 10px;
}


Output

image
Center Text
Top-Left Text
Top-Right Text
Bottom-Right Text
Bottom-Left Text



Trending Posts

Why Should You Create Programming Notebooks?

How To Create a Fake Facebook Login Clone Using Only HTML and CSS?

What Are The Use of Function Keys F1 to F12 on The Keyboard?

5 Awesome Computer Shortcut Key Tricks You Must Try

How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

Why iPhones Don't Have Memory Card Slots?

Is It Good To Use Social Media?

8 Characteristics Of Modern Computer

Why Do All Celebrities Use iPhones?