Text over an image with CSS -


first want quite newbie css. without changing lot of code have text on image. current code is:

#container {   width: 1010px;   margin-left: auto;   margin-right: auto;  }    #left-box {   width: 681px;   float: left;   margin-right: 29px;  }    #data {   width: 206px;   height: 140px;   background-color: #fff;   float: left;   margin-right: 10px;   margin-left: 11px;   margin-bottom: 20px;  }
<div id="container">    <div id="left-box">      <div id="data">  	  <img src="img/img1.jpg" />  	  <<<< here want put text, should on image >>>>  	  <h2 class="h2-data"><a href="#">some text</a></h2>  	  <p class="stats">text</p>      </div>    </div>  </div>

i tried adding code found google, text appearing @ top of website when use absolute position. , relative text under image, not on image.

anyone can me?

use position: relative block enclosing image , position: absolute text after assigning class it.

#container {    width: 1010px;    margin-left: auto;    margin-right: auto;  }  #left-box {    width: 681px;    float: left;    margin-right: 29px;  }  #data {    width: 206px;    height: 140px;    background-color: #fff;    float: left;    margin-right: 10px;    margin-left: 11px;    margin-bottom: 20px;    position: relative;  }  .text {    top: 0;    left: 100;    position: absolute;  }
<div id="container">    <div id="left-box">      <div id="data">        <img src="http://placehold.it/200x140"></img>        <div class="text">          <<<< here want put text, should on image>>>></div>        <h2 class="h2-data"><a href="#">some text</a></h2>        <p class="stats">text</p>      </div>    </div>  </div>


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -