Responsive - text on image

问题

I have problem with responsive design. I try to display text over the box in image, but when I resize browser text is outside the 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 I should do to have text always in right place over image?

回答1:

Try this 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;
}

回答2:

The problem is you're using a fixed width (45px) for your text. Try using a percentage width instead:

#dd7{
...
width: 5%;
}

https://jsfiddle.net/pnzLn2no/1/

来源：https://stackoverflow.com/questions/30120746/responsive-text-on-image