0

Макет: 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, как на фоне)? Сейчас при изменении размера экрана, текст сдвигается и наползает на число.

1
  • Навскидку: может быть поможет задание контейнеру фона имитирование пропорции фона через вертикальный педдинг псевдоэлемента(загуглите как сделать адаптивный квадрат на css). А затем делать отступы дочерних текстовых блоков исходя из рамеров этого адаптивного контейнера. Первое, что приходит в голову.
    – user31906
    10 авг 2017 в 16:24

2 ответа 2

1

если можно картинку из бэкграунда переместить в разметку, то можно так:

.about-smartprogress { 
 position: relative;
    color: #fff;
    margin-top: 50px;
    margin-bottom: 35px;
}

.about-smartprogress img {
  width: 100%;
  height: auto;
}

.grant {
  width: 300px;
  position: absolute;
  top: 57%;
  left: calc(50% - 150px);
  height: 19%;
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.2rem;
}

.bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
<div class="about-smartprogress">
  <img src="http://ico.smartprogress.do/img/index/bg-about-smartprogress.jpg">
  <div class="grant">
    <div class="top">
      В 2015 году мы получили<br/>
      грант Startup Chile
    </div>
    <div class="bottom">
      От правительства Чили
    </div>
  </div>
</div>

Единственное подобрать размеры шрифтов для разной ширины экрана, отступ слева и ширину соответственно блока grant ...

0
<div class="about-smartprogress">
    <p class="top">
      В 2015 году мы получили<br/>
      грант Startup Chile
    </p>
    <p class="bottom">
      От правительства Чили
    </p>
</div> 

* {
      margin: 0;
      padding: 0;
    }

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

    .about-smartprogress {
      background-image: url(http://ico.smartprogress.do/img/index/bg-about-smartprogress.jpg);
      background-size: 100% 100%;
      background-position: top;
      background-repeat: no-repeat;
      height: 800px;
      color: #fff;
      padding-top: 50px;
      padding-bottom: 35px;
      position: relative;
    }

    .top {
      position: absolute;
      top: 57%;
      left: calc(50% - 125px);
      width: 250px;
      height: auto;
      background-color: red;
      text-align: center;
      font-size: 1.3rem;
      font-weight: bold;
    }

    .bottom {
      position: absolute;
      left: calc(50% - 125px);
      bottom: 22%;
      width: 250px;
      height: auto;
      background-color: red;
      text-align: center;
      font-size: 1.3rem;
      font-weight: bold;
    }
1
  • background-size: 100% 100%; - Тогда фон начинает искажаться. Требуется именно "cover"
    – Max
    11 авг 2017 в 6:37

Ваш ответ

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

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