html - Responsive - text on image -

i have problem responsive design. try display text on box in image, when resize browser text outside box.

my picture:

.row6 {   background: none;   width: 100%;   height: 130px;   border: 0px salmon dotted;   font: bold 1.7vw arial, sans-serif;   margin: 20px auto; }  .row6 > div {   position: relative;   top: 8px;   width: 100%;   height: 100%;   margin: 0 auto;   background: url(images/background.png) no-repeat;   background-size: 100% }  #dd7 {   margin-left:44.7%;   width:45px;   text-align:center;    padding-top:0.7% } 

html code:

<div class="row6">   <div>     <div>       <div id="dd7">text</div>     </div>                  </div> </div> 

what should have text in right place on image?

try fiddle

.row6 {   background: none;   width: 100%;   height: 130px;   border: 0px salmon dotted;   font: bold 1.7vw arial, sans-serif;   margin: 20px auto; }  .row6 > .bgimage {     width: 100%;   height: 100%;   margin: 0 auto;   background: url(http://i.stack.imgur.com/amwbh.png) no-repeat;   background-size: 100% }  #dd7 {   margin-left:44.7%;   margin-top: 1.2%;   float: left; }