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

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

How To Create A Simple Navigation Bar Using Only HTML and CSS?

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

Build a Responsive Product Card Gallery with Plain HTML & CSS

Create a Stunning Personal Portfolio Website with HTML & CSS

What is Blogging Business? A Beginner’s Guide to Making Money Online

Sunrise And Sunset Animation Using HTML & CSS?

The Secret to Flawless Web Design: Mastering Responsive Layouts

Is TypeScript Frontend or Backend?

Lock the Digital Door: What Aspiring Entrepreneurs Need to Know About Cybersecurity