Bladephp: Now with 7+ codeigniter, php, and laravel project 7+ php project From $18/Year From Rs. 1000/Year

How to Display Text Over Image Using HTML And CSS

by
Category:php
php html css
How to Display Text Over Image Using HTML And CSS

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>

0 Comments


Html code work in comment box


Related Post