@WowItIsYou2020

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

Мне нужно что бы изображение выглядело примерно так при высоте 700 px.
5f96ebbf736f2971361355.png
На данный момент мой результат не совсем похож:) (игнорируем кнопки и текст их время еще ни пришло)
5f96ebdd92d4f764767184.png

<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?
  • Вопрос задан
  • 93 просмотра
Решения вопроса 1
zloy_kot_developer
@zloy_kot_developer
Разработчик всего понемногу
Ваш вопрос очень не простой, так как фон будет разный на разных экранах. Вы установили высоту в 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, юзеры на смартфонах скажут вам спасибо)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы