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

Question

[Евгений Гайдуков]

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

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

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

Comments

[xonar]

Так нужно вам?
То что у вас закоментированно в коде, это всё что вы пробовали? У позиционирования есть стороны top, right, bottom, left. С помощью них вы можете управлять положением блока.

[Евгений Гайдуков]

xonar, да, так и нужно, а закомментирована одна из многих попыток осуществить задуманное))

[xonar]

Евгений Гайдуков, Как в ответах уже посоветовали, вам нужно эту картинку желательно фоном сделать. Если вы не хотите фоном делать, то hero задаёте position: relative, а блоку с текстом position: absolute; и играетесь со значениями top: 0; left: 0; и т.д. на ваше усмотрение.

Answer 1

[Рома Зварич]

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

Результат:
https://codepen.io/hisbvdis/pen/mdbQyxo

Comments

[Евгений Гайдуков]

Спасибо, вот только картинка "режется", ща поищу способ её "уместить" в блок

[Рома Зварич]

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

Такое поведение вызывает свойство object-fit: cover. В ином случае, будет оставаться белое пространство по бокам

Чтобы было видно камешки, можно поиграть со свойством object-position. Я уже немного изменил его и обновил пример в CodePen. Можете еще изменить, если потребуется

Answer 2

[Александр]

Если у вас фон а на фоне элементы, то надо фон делать а не картинку вствлять

.hero__container {
   background-image: url(http://images.vfl.ru/ii/1568893523/c9258e21/27915042.jpg);
    height: 100vh;
    background-size: 100vw 100vh;
}

Насчет высоты сами придумаете что и как.

Comments

[Евгений Гайдуков]

в том то и дело, что там не фон, картинки будут менятся в админке

Answer 3

[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;
}

Answer 4

[privat13]

Codepen

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