html - How to place text over the image? -


i want place text on image following picture shows :

enter image description here

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

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

python - Django-cities exits with "killed" -

python - How to get a widget position inside it's layout in Kivy? -