html - How to place text over the image? -
i want place text on image following picture shows :
html wrote :
<body> <div class="image_holder"> <img src="bg2.jpg" /> <div class="overlay"> </div> </div> <div>nhs sub</div> </body>
css :
.image_holder { position:relative; float:left; } .overlay { position:absolute; top:0; background-color:rgba(34,70,118,0.7); width:100%; height:100%; }
the text automatically go after image. should place text on image ?
try this
<div class="image_holder"> <div class="overlay">nhs sub</div> </div>
style
.image_holder{ background:url('img.jpg'); }
another way
<div class="image_holder"> <img src="img.jpg"/> <div class="overlay">nhs sub</div> </div>
style
.img_holder{ position:relative; } .img_holder img{ postion:absolute; z-index:-1; } .overlay{ z-index:1; }
Comments
Post a Comment