CODEWITHSUNDEEP
htmlcsscss-position
user1049961
user1049961

Reputation: 2736

CSS - make text stay on same place on responsive image

I'm trying to make text stay on same place on responsive image.

The HTML I have is:

<div class="container">
    <img src="http://i.imgur.com/K6XP6tp.png" alt="">
    <div class="counter">
        <span class="days">1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <div class="counter2">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</div>

The CSS: 

.container {
    position: relative;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
   height: auto;
}

.days {
    position: absolute;
    top: 30%;
    left: 50%;
}

.counter span {
    font-size: 25px;

}

cannot make this work. I created a jsfiddle. Any ideas how to make this work?

Upvotes: 2

Views: 6801

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106058

You should do this from an image within the flux, so it allows it's container (here body) to grow.

then your 30% comes efficient (25% used inthe snippet below). :):

.container {
  position: relative;
}
.container img {
  display: block;
  width: 100%;
}
.days {/* other spans to position through coordonates as well */
  position: absolute;
  top: 25%;
  left: 50%;
}
[class*="counter"] span {
  font-size: 25px;
  position: absolute;
}
<div class="container">
  <img src="http://i.imgur.com/K6XP6tp.png" alt="">
  <div class="counter">
    <span class="days">1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div class="counter2">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>

Upvotes: 4

Related Questions