Пытаюсь сделать картинку и на ней текст, но при этом, чтобы когда уменьшаем размер экрана, надо, чтобы текст оставался на той же области картинки.
Картинка тоже уменьшается, так как используется 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>
то есть получается картинка растягивается на нужную мне ширину и высоту, но как же мне сделать так, чтобы в каком бы месте текст не стоял, чтобы при уменьшении экрана, когда уменьшается картинка, чтобы текст тоже следовал за той позицией, а не улетал по своим делам.
Чтобы находился в блоке картинки.
Это может быть не только текст, но и к примеру любой блок.
Есть ли вообще такая возможность?