Responsive Images Positioned Over Image

Responsive images positioned over image

Set your #counter div to display: inline; or add a wrapper with display: inline; and set the max-width of #over to for example 10% (DEMO):

#counter {
    position: relative;
    display: inline;
}
#over {
    position:absolute;
    left:33%;
    top:43%;
    max-width: 10%;
}

Responsive images positioned over responsive image

Something like this should work. As long as you are scaling proportionally, you can use absolute positioning and set everything with percentages so it scales nicely.

HTML

<div class="container">
    <img src="http://i.imgur.com/OXsviSl.jpg">
    <a class="left" href="#"></a>
    <a class="center"></a>
    <a class="right" href="#"></a>
</div>

CSS

.container {
    position: relative;
    margin: 20px;
}
img {
    width: 100%;
}
.left, .right, .center {
    display: block;
    position: absolute;
    background-color: blue;
    top: 42%;
    width: 10%;
    height: 17%;
}
.left {
    left: 18%;
}
.center {
    left: 43%;
}
.right {
    left: 68%;
}

Heres a jsFiddle

responsive image centered on top of another responsive image

You can use flexbox for centering.

.container {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

}

.container .logo {

  position: absolute;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}

/* size of second image */

.container .logo>img {

  width: 100px;

}

.container .background {

  width: 100%;

}

<div class="container">

  <img class="background" src="https://via.placeholder.com/560x500/FFFF00/">

  <div class="logo"><img src="https://via.placeholder.com/300x120"></div>

</div>

Responsive absolute positioning with 2 images

I think you want something like this:

.field-container {
  position:relative;
  width:50%;
}
.field {
  width: 100%;
  height: auto;
}
.ball {
  left: calc(8.3% * 4);
  display: inline-block;
  position:absolute;
  top: 50%;
  width: 7%;
  transform: translate(10%, -50%);
}

The field doesn't have to be absolutely positioned, but it does have to fill it's containing element.

The ball should have a width that is a percentage of its container in order to make it resize in proportion with that.
You can centre the ball by absolutely positioning it, relative to its container, 50% from the top, and then using transform to translate it back up half of its height (50%);
Finally, calc can be used to position the ball on the field. 8.3% is 100/12, that is one of the 12 sections of the field.Adjust the second number to move the ball between sections. The translate function takes 10% just to nudge the ball into place.

---

Related Topics