Как добиться отображения background как на макете?

Question

[sasha_jarvi]

Имеется следующий код для шапки сайта:

<header class="header">
    <div class="container">
      <div class="header__content-wrap">
        <img src="https://i.ibb.co/hYv5DY9/logo.png" class="header__logo" alt="Star Wars Character Encyclopedia"/>
      </div>
    </div>
  </header>

.header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://i.imgur.com/xwkOkSQ.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
    &__content-wrap {
      padding: 120px 0;
      display: flex;
      justify-content: center;
    }
}

@media (max-width: 768px) {
    .header {
      &__content-wrap {
        padding: 58px 0;
      }

      &__logo {
        max-width: 212px;
      }
    }
  }

На мобильных устройствах фон должен выглядеть так (в данном случае используется ширина экрана 320px):


На данный момент он выглядит так:


Как исправить отображение фона?
Ссылка на песочницу: https://jsfiddle.net/6d7vgk3h/

Comments

[Alex]

Ссылку на песочницу

[Ankhena]

Начать с того, что взять необрезанную картинку.
Вряд ли голова как-то нарисуется, если ее нет в исходном изображении.
Ваша:

[sasha_jarvi]

Alex, добавил к тексту вопроса

[sasha_jarvi]

Ankhena, вы правы, я неверно вырезал картинку. Закрываю вопрос

Answer 1

[sasha_jarvi]

Картинка была вырезана неправильно (ее исходный размер должен был быть 1440 на 810). Изменил картинку - теперь размер меняется правильно:
https://jsfiddle.net/6d7vgk3h/