Как сверстать такой элемент?

Question

[cehka]

Тренируюсь на вёрстке, и постоянно я застреваю на таких элементах. Нужно сверстать скрин, что бы он одновременно в двух блоках, допустим "main" и "benefits" . Как это реализовать?
Вот что у меня уже есть:

Вот что нужно:

<div class="main">
    <section>
      <div class="container">
        <header>
          <div class="header-logo">
            <img src="/assets/img/logo.png" alt="Logo">
          </div>
          <nav>
            <ul>
              <li>
                <a href="#">Features</a>
                <a href="#">Pricing</a>
                <a href="#">Blog</a>
                <a href="#">Contact</a>
                <a href="#" class="btn btn-outline-auth">Login</a>
              </li>
            </ul>
          </nav>
        </header>
        <div class="content">
          <div class="content-text">
            <h1 class="content-text__title title"> Grow Your business with Merkury </h1>
            <p class="content-text__desc"> Your partner in crime! </p>
          </div>
        </div>
      </div>
    </section>
  </div>

Придётся играть с position:absolute, или что?
И раз создал тему, как лучше определять размер изображения?

Answer 1

[Никита Юдин]

https://codepen.io/anon/pen/NoOLPO

Answer 2

[Евгений]

Если это не bootstrap 4, то придется с позиционированнием возиться... А так, в bootstrap есть фишка, класс img-overlay.

Можете посмотреть его свойства, думаю он вам подойдет.

Comments

[cehka]

Не хочется использовать Bootstrap.
Хочу научиться самому делать такое.