Как сделать что отступ адаптировался вместе с background?

Question

[Secret73]

Всем привет. Имеется вот такая верстка с bootstrap 4. background идет изображение, поверх него текст ,мне нужно что бы текст был всегда при адаптации около определенного элемента на изображении. background size: cover. Я пробывал делать отступ для текста и в % , но соотношение при ресайзе сбивается. Как сделать что бы отступ уменьшался, относительно ресайза beckground?
Скрин: joxi.ru/J2bBDLVT4dMWP2
Скрин: joxi.ru/DmBZzkLCNE6Zbm

<section class="weeks">
      <div class="container">
        <div class="row">
          <div class="col-md-6"></div>
          <div class="col-md-6 text-left">
            <h2>ТУТ<br>БУДЕТ<br>ТЕКСТ</h2>
          </div>
        </div>
      </div>
    </section>

.weeks {
  background: url('../img/weeks-bg.png') no-repeat;
  background-size: cover;
}
.weeks h2 {
  font-family: 'OswaldBold', sans-serif;
  color: #ffffff;
  font-size: 64px;
  margin-top: 305px;
  line-height: normal;
}

Answer 1

[Александр Севиринов]

во-первых у Вас изображение растягивается относительно размера окна, очень сложно поймать точное расположение текста относительно background

По Вашему вопросу решением может быть следующее:

<section class="weeks">
  <h2>ТУТ<br>БУДЕТ<br>ТЕКСТ</h2>
</section>

.weeks {
  background: url('http://www.siteoffline.com/dtv/ten_grid.png') no-repeat;
  /* background-size: cover; */
}

.weeks h2 {
  font-family: 'OswaldBold', sans-serif;
  color: #ffffff;
  font-size: 64px;
  padding: 5rem 20rem; /* позиционируем текст относительно окна */
  /* margin-top: 305px; */
  line-height: normal;
}