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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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