Как спозиционировать элементы поверх изображения?

Салют всем гуру вёрстки!

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

Второй день бьюсь с позиционированием

5d83749c9a4a1829589570.png

  • Вопрос задан
  • 842 просмотра
Решения вопроса 2
Вроде все условия соблюдены.
Проверяйте
Если чего-то не хватает, пишите.

Результат:
https://codepen.io/hisbvdis/pen/mdbQyxo
Ответ написан
NeiroNx
@NeiroNx
Программист
Если у вас фон а на фоне элементы, то надо фон делать а не картинку вствлять
.hero__container {
   background-image: url(http://images.vfl.ru/ii/1568893523/c9258e21/27915042.jpg);
    height: 100vh;
    background-size: 100vw 100vh;
}

Насчет высоты сами придумаете что и как.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@LaraLover
img{
  position:absolute;
  top: 0;
  left: 0;
  z-index: 1;
  max-width:100%;
}
.hero__container{
  z-index:2;
  position:relative;  
}


Но вообще я бы задал бы картинку бекграундом. Как-то так
spoiler

<div class="hero">
        <div class="hero__container">
          <div class="hero__description container">
            <h1 class="hero__title">Become an outstanding List</h1>
            <h3 class="hero__subtitle">Through one of our training programs at MSCoL</h3>
            <a href="/" class="hero__button">Join the team</a>
          </div>
        </div>
      </div>

.hero{
  background: url(http://images.vfl.ru/ii/1568893523/c9258e21/27915042.jpg) no-repeat bottom left;
  background-size:cover;
  padding: 100px 0;
}
.hero__button {
    display: block;
    max-width: 170px;
    margin-top: 50px;
    text-align: center;
    color: #fff;
    padding: 20px;
    background-color: red;
    border-radius: 4px;
    transition: transform .5s;
}
Ответ написан
Комментировать
@privat13
Codepen

Как вариант использовать абсолютное позиционирование и z-index. Картинку ниже, контейнер выше. А на мобильных контейнер уже опустить изменив ему top.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы