Responsive - text on image

Question

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: enter image description here

.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?

Put the background image on the div containing the text (`#dd7`). — gaynorvader, May 08 '15 at 09:49
But I have one big image with little place for text, that place (white box) must be in the correct part of image. This is reason why div with text is in div with image background. — Ruben Lech, May 08 '15 at 09:54
@Ruben Lech, First of all remove position relative from this class. - .row6 > .bgImage-. — stanze, May 08 '15 at 10:05

score 0 · Answer 1 · answered May 08 '15 at 10:05

0

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/

answered May 08 '15 at 10:05

gaynorvader

2,619
3
18
32

score 0 · Accepted Answer · answered May 08 '15 at 10:08

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(https://i.stack.imgur.com/amwBH.png) no-repeat;
  background-size: 100%
}

#dd7 {
  margin-left:44.7%;
  margin-top: 1.2%;
  float: left;
}

Responsive - text on image

2 Answers2

Linked