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

5 Awesome Computer Shortcut Key Tricks You Must Try

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

Is Web Development Dying In 2022?

Why iPhones Don't Have Memory Card Slots?

Why Do All Celebrities Use iPhones?

5 Tips To Become A Computer Genius | How To Become A Computer Genius?

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

Can I Start Coding At The Age of 30, 40 or 50?

How To Take Screenshot On HP, Dell, Asus Laptop And PC?

How To Make Your Computer Fast?