0

Пытаюсь сделать картинку и на ней текст, но при этом, чтобы когда уменьшаем размер экрана, надо, чтобы текст оставался на той же области картинки.
Картинка тоже уменьшается, так как используется background-size:contain;.

body,
html {
  width: 100%;
  height: 100%;
}

.loading {
  width: 100%;
  height: 100%;
  text-align: center;
}

.loading .img {
  display: block;
  max-width: 900px;
  height: 100%;
  max-height: 562px;
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSkUqIs5_2j4yd1uYpvyx8Bj5_a3YtOS-YKMg&usqp=CAU') 0 0 no-repeat;
  background-size: contain;
  margin: 0 auto;
  color: #00ff00;
  font-size: 20px;
}

.loading .img span {
  display: grid;
  width: 100%;
  height: 100%;
  align-items: center;
}
<div class="loading">
  <span class="img">
      <span>
          ...Text...
      </span>
  </span>
</div>

то есть получается картинка растягивается на нужную мне ширину и высоту, но как же мне сделать так, чтобы в каком бы месте текст не стоял, чтобы при уменьшении экрана, когда уменьшается картинка, чтобы текст тоже следовал за той позицией, а не улетал по своим делам.

Чтобы находился в блоке картинки.
Это может быть не только текст, но и к примеру любой блок.

Есть ли вообще такая возможность?

1 ответ 1

0

body,
html {
  width: 100%;
  height: 100%;
}

.wrapper {
  max-width: 900px;
  height: 100%;
  max-height: 562px;
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSkUqIs5_2j4yd1uYpvyx8Bj5_a3YtOS-YKMg&usqp=CAU') center no-repeat;
  background-size: contain;
  margin: 0 auto;
  color: #00ff00;
  font-size: 20px;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="wrapper">
  <div> TEXT </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.