0

При просмотре адаптивной версии сайта в браузере, проблем не возникает, но как только открываешь с мобильного устройства или планшета, задний фон обрезается. Что я делаю не так?

Html CSS код прилагаю по ссылке ТЫК

<body>
  <header>
    <div class="main-bgFix">
      <div class="container">
        <nav>
          <a href="#" class="logo"><img class="logo1" src="img/new_logo.svg" alt="logo" /></a>
          <ul class="nav-menu">
            <li class="li-item">
              <a href="#portfolio" class="a-style">Portfolio</a>
            </li>
            <li class="li-item">
              <a href="#aboutMe" class="a-style">O mně</a>
            </li>
            <li class="li-item">
              <a href="#price" class="a-style">Ceník</a>
            </li>
            <li class="li-item">
              <a href="#kontakty" class="a-style">Kontakty</a>
            </li>
          </ul>
          <a href="tel:+420770114540" class="a-style nav-hide">+0000</a>
        </nav>
        <div class="header-main">
          <h1 class="header-main__title">Dsdfkjsdfjsgdjgf</h1>
          <h2 class="header-main__title-2">Váš stylista a kadeřník v Brně</h2>
          <img src="img/scissors.svg" alt="" class="header-main__scissors" />
          <button class="header-main__button">
            <a href="https://n688921.yclients.com/" class="header-main__button-click">Online rezervace</a>
          </button>
        </div>
      </div>
    </div>
  </header>

</body>
.main-bgFix
background-image: url(../img/bg_main3.png)
background-position: center center
height: 100vh
max-width: 100%

Так же прикладываю скины как должно быть и как оно выглядить на самом деле 1

введите сюда описание изображения

2
  • 1
    По ссылке пример выглядит как попало и ничего проверить толком нельзя, но предположу что Вам нужно указать необходимый background-size
    – Simon
    19 янв 2022 в 18:19
  • Не могли бы Вы выложить свой код прямо в тексте вопроса, а не через ссылки? Так будет понятнее и доступнее остальным участникам увидеть Ваш код и попытаться Вам помочь. (Для форматирования можете использовать Ctrl+M, для редактуры нажмите на кнопку править)
    – 4500zenja
    19 янв 2022 в 18:24

1 ответ 1

2

Как сказал @Simon Вам надо использовать background-size, предположу что Вы хотите чтобы картинка не обрезалась, тогда Вам надо задать: backround-size:100%. Но это будет ужасным решением, ведь картинка будет растягиваться и сжиматься, лучше всего использовать background-size: cover тогда background будет выглядеть наиболее адекватно и типично для большинства проектов)

Документация на свойство background-size

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.