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. You may also like How to Full Page Background Image Using HTML And CSS and How to Fullscreen Background Video Using HTML And CSS.
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