Как сделать похожий background?

Question

[WowItIsYou2020]

Мне нужно что бы изображение выглядело примерно так при высоте 700 px.

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

<div class="mainscreen">
  <div class="mainscreen_content">
    <h1 class="mainscreen_title">Fork App</h1>
    <p class="mainscreen_tagline">A real gamechanger in the world of web development</p>
    <p class="mainscreen_version">v. 2.8 For Mac and Windows</p>

    <div class="mainscreen_bot">
      <button>Download For Free Now</button>
      <p>Unlimited 30-Days Trial Period</p>
    </div>
  </div>
</div>

.mainscreen 
{
    background-image: url('../images/dest/main/main-screen.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    
    &_content 
    {
        padding: 50px 10px;
        height: 700px;
    }
}

Что мне нужно изменить? Как добиться такого background?

Comments

[Ankhena]

Cover не подойдет, потому что обрезает часть изображения.
А вам нужно вспомнить геометрию и пропорции.
Т.е. у блока не должно быть фиксированной высоты, задавайте её пропорциональна ширине.
Поэтому, возможно, вам будет проще задавать фон не самому блоку, а псевдоэлементу. Либо для размеров фона использовать vw.

Потом не забыть про media.

Answer 1

[Семен Кузнецов]

Ваш вопрос очень не простой, так как фон будет разный на разных экранах. Вы установили высоту в 700px это ок. Но вы не учитываете ширину экрана. Если хотите точного соответствия картинки на экране я бы рекомендовал вам поместить изображение в виде тега img

То есть создать нечто такое:

<section class="main">
      <div class="main__content">
         <!-- Тут будет содержимое (кнопки, текст и тд) -->
      </div>
      <img src="/image_1920.png" alt="">
</section>

Необходимые стили

.main {
    position: relative;
}
.main__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Таким образом вы получите оригинальное соотношение сторон а .main_content накроет изображение и в нем вы сможете запилить контент. И бонусом вы можете использовать srcset, юзеры на смартфонах скажут вам спасибо)