How to Display Text Over Image Using HTML And CSS

admin | Posted on May 10, 2021 |

In this tutorial we will show you how to display text over image using HTML and CSS we display the text in middle you can display the text anywhere over the image.

HTML and CSS Code

<html>
<head>
<style>
body
{
    text-align:center;
    width:100%;
    margin:0 auto;
    padding:0px;
    font-family:helvetica;
    background-color:#81DAF5;
}
#wrapper
{
    text-align:center;
    margin:0 auto;
    padding:0px;
    width:995px;
}
#image_div
{
 width:500px;
 margin-left:245px;
 position:relative;
}
#image_div img
{
    width:100%;
}
#image_div #image_label
{
    margin:0px;
    position:absolute;
    top: 50%;
    width: 100%;
}
#image_div #image_label span
{
    background-color: #0B4C5F;
    opacity:0.8;
    font-size:25px;
    padding:7px;
    box-sizing:border-box;
    color:white;
    font-weight:bold;
}
</style>
</head>
<body>
<div id="wrapper">

<div id="image_div">
 <img src="image/imagedemo.jpg">
 <p id="image_label"><span>This Is Text Over Image</span></p>
</div>

</div>
</body>
</html

Leave a Reply Cancel reply