Текст, логотип и гамбургер на фоновом изображении

Question

Верстаю макет Макет с фигмы. Для этой страницы есть фоновый рисунок и дополнительные:

Фоновый

Дополнительные - логотип

и гамбургер

Есть html код страницы

:root {
  --my-screenwidth: 1366px;
  --my-screenheight: 768px;
  --layout-screenwidth: 1441px;
  --layout-screenheight: 811px;
}

._container {
  --layout-containerwidth: 1111px;
  --layout-containerheight: 43px;
  max-width: calc((var(--layout-containerwidth)/var(--layout-screenwidth))*var(--my-screenwidth));
  margin: 0px auto;
  box-sizing: content-box;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Webovio</title>
</head>

<body>
  <div class="wrapper">
    <main class="page">
      <div class="page__main-block main-block">
        <div class="main-block__container _container">
          <div class="margin-block__header">
            <div class="main-block__nav">
              <!--
                        <img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
                        <img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
                        -->
              <!--<div class="main-block__header_image_1">-->
              <img src="https://i.stack.imgur.com/oB0ua.png" class="main-block__logo_name" alt="logoname">
              <!--</div>-->
              <!--<div class="main-block__header_image_2"></div>-->
              <img src="https://i.stack.imgur.com/hO056.png" class="main-block__logo_hamburger_icon" alt="menulogo">
              <!--</div>-->
            </div>
          </div>
          <div class="main-block__body">
            <div class="main-block__smalltitle">A place where</div>
            <div class="main-block__title">A creative agency for redemptive brands</div>
            <!--
                        <div class="main-block__text">
                            Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
                        </div>
                        -->
            <div class="main-block__items">
              <!--<a href="" class="main-block__link main-block__link_yellow">Get in touch link</a>-->
            </div>
          </div>
        </div>


        <div class="main-block__image _ibg">
          <img src="https://i.stack.imgur.com/Tju6g.png" alt="cover">
        </div>


      </div>
    </main>
  </div>
</body>

</html>

В сss приведены размеры шапки, содержащей логотип и гамбургер. Здесь приведено свойство max-width: calc((var(--layout-containerwidth)/var(--layout-screenwidth))*var(--my-screenwidth));, вычисляющее максимальную ширину шапки с учетом значений ширины моего экрана и экрана макета, а также значения ширины шапки на макете, взятых с фигмовского макета (шапка состоит из логотипа и гамбургера).

Подскажите как сверстать макет так, чтобы на фоновом рисунке заняли свои места логотип и гамбургер в шапке, а так же чтобы текст (заголовки A place where и A creative agency for redemptive brands) стал слева по горизонтали и посередине по вертикали рисунка, а также чтобы была возможность пропорционального масштабирования фонового изображения как на Средства пропорционального масштабирования. Должно быть как на Макет с фигмы. Я пытался прописывать стили, но у меня не получалось поместить текст, логотип и гамбургер на фоновом рисунке.

P.S. Точные отступы не нужны. Подскажите как сверстать, чтобы на фоновом изображении оказалось содержимое страницы, включая текст, логотип и гамбургер.

БЛОГ НА HUSL

Текст, логотип и гамбургер на фоновом изображении

Ответы (0 шт):