Как наклеить div на фоновое изображение?

Question

У меня есть заголовок с фоновым изображением. На этом изображении я хотел бы разместить несколько элементов div с формами круга, чтобы добавить анимацию. Проблема в том, что как только порт вида сжимается, формы будут соответственно перемещаться, если используется абсолютное положение. Я опробовал это с vh и vw единицами, но формы все еще будут двигаться, даже если фоновая фотография не изменится слишком сильно. Я просто хочу, чтобы этот div был там, как если бы он был частью фотографии. Это возможно?

Answer 1

Есть довольно аккуратный хак, который вы можете сделать для кругов (или идеальных квадратов). В псевдоклассе :after вы можете сказать padding-bottom: 100% - этот процент относится к самому .circle, поэтому ширина и высота в точности совпадают. В сочетании с процентом от ширины круга вы можете изменить их размер с помощью контейнера.

Вы заметите, что изменение размера контейнера сохраняет размер круга относительно родительского элемента и положение относительнородитель также.

.header {
  position: relative;
  height: 300px;
  background: grey;
}

.circle {
  width: 10%;
  position: absolute;
}

.circle::after {
  content: '';
  display: block;
  padding-bottom: 100%;
  border: 1px solid green;
  border-radius: 100%;
  overflow: hidden;
}

.circle.top-left {
  left: 10%;
  top: 10%;
}

.circle.bottom-right {
  right: 10%;
  bottom: 10%;
}

<div class="header">
  <div class="circle top-left"></div>
  <div class="circle bottom-right"></div>
</div>