Макет: https://codepen.io/maxtor/pen/prwyvZ
.about-smartprogress {
background-image: url(http://ico.smartprogress.do/img/index/bg-about-smartprogress.jpg);
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
height: 1000px;
color: #fff;
padding-top: 50px;
padding-bottom: 35px;
}
.grant {
width: 50%;
margin: 580px auto 0;
text-align: center;
font-size: 1.3rem;
font-weight: bold;
line-height: 1.2rem;
}
.top {
padding-bottom: 25%;
}
<div class="about-smartprogress">
<div class="grant">
<div class="top">
В 2015 году мы получили<br/>
грант Startup Chile
</div>
<div class="botom">
От правительства Чили
</div>
</div>
</div>
Возможно ли спозиционировать текст в div.grant таким образом, чтобы он был всегда привязан к определенному месту на фоновой картинки (нужно чтобы текст в блоке располагался выше и ниже числа 35.000, как на фоне)? Сейчас при изменении размера экрана, текст сдвигается и наползает на число.