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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwRuG8AFGp6kvO3uN86-MBBEIX6ffsOJDI7uNbJWevGjArjzDpgtVx1dg07Aa5cD8qrwiuky3OrQ8aM4viHPCXxe-h7620dOLd8DhzWfYCCUAtQa0zeuZ5v1poFQMhPaXkpuhw7-kPyfUm1HSHX-QigtmpykCeK7hHF2_C2kePatzuzOms9RfLDmo3/s1280-rw/image.png)
Center Text
Top-Left Text
Top-Right Text
Bottom-Right Text
Bottom-Left Text