Ваш вопрос очень не простой, так как фон будет разный на разных экранах. Вы установили высоту в 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, юзеры на смартфонах скажут вам спасибо)
