Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Задний фон css: background-image | htmlbook.ru

html — Задний фон обрезается в мобильной версии

Вопрос задан

Изменён 1 год 1 месяц назад

Просмотрен 155 раз

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

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

<body>
  <header>
    <div>
      <div>
        <nav>
          <a href="#"><img src="img/new_logo.svg" alt="logo" /></a>
          <ul>
            <li>
              <a href="#portfolio">Portfolio</a>
            </li>
            <li>
              <a href="#aboutMe">O mně</a>
            </li>
            <li>
              <a href="#price">Ceník</a>
            </li>
            <li>
              <a href="#kontakty">Kontakty</a>
            </li>
          </ul>
          <a href="tel:+420770114540">+0000</a>
        </nav>
        <div>
          <h2>Dsdfkjsdfjsgdjgf</h2>
          <h3>Váš stylista a kadeřník v Brně</h3>
          <img src="img/scissors.
 
 svg" alt="" />
          <button>
            <a href="https://n688921.yclients.com/">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%

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

  • html
  • css

2

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

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

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Задний фон закрывает заголовок

  • Главная
  • Вопросы

При стилизации одной из секции в Sass возникла проблема: задний фон закрывает заголовок и подзаголовок сайта. Не понимаю в чём ошибка, так как проверял код в депазитории. ( file:///C:/Users/REFRESH/OneDrive/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/uber/src/index.html или http://127.0.0.1:5500/src/ )

(Так как не было в вариантах выбора для прикрепления кода Sass, проставил CSS.)

.choise
    position: relative
    min-height: 895px
    padding: 57px 0 138px 0
    background: url('../img/bg/mobile_app.png') center (center / cover) no-repeat
    &_img
        position: relative
        display: block
        margin: 56px auto 0 auto
        z-index: 2
    &_descr
        text-align: center
        color: #222222
        font-size: 17px
        font-weight: 300
        line-height: 24px
    .black
        position: absolute
        top: 0
        left: 0
        height: 499px
        width: 100%
        background-color: #070716
        z-index: 1

    <section>
        <div>
            <div></div>
            <div>возможности</div>
            <h3>Выбор - отличная штука!</h3>
            <div>Закажите автомобиль, который подходит вам 
             по стилю и бюджету</div>
    
            <img src="img/choise/car.
 
 png" alt="uber car">
            <div>
                Машины на каждый день.<br>
                Лучше, быстрее и дешевле, чем такси
            </div>
        </div>
    </section>

Тимофей Павлов

1 year ago

  • Активные
  • Старые
  • Голоса

блоки для которых определено позиционирование position: absolute/relative/fixed

идут поверх блоков без позиционирования, поэтому блок .black перекрывает заголовки

для него нужно проставить index: -1 — отрицательное значение ставит блок позади контента родительского блока, т.е. весь контент внутри блока <div> будет поверх черного фона, что нам и нужно

Valera TT

1 year ago

При отрицательном z-index пропадает задний фон (черный цвет). И цвет заголовков должен быть белый. Этот код скопирован из депазитория, поэтому ошибка не моя.

Тимофей Павлов

1 year ago

вижу что название класса choise вместо choice, значит этот код не является кодом из депозитория, возможно где-то в других фрагментах кода такие же расхождения, если не показываются заголовки — надо смотреть стили для label, title, subtitle — там цвет задается для заголовков и z-index для них должен быть 2, чтобы они были поверх фона black

Valera TT

1 year ago

так в депозитории нет стилей для label, title, subtitle, я знаю что там задаётся цвет для заголовков, мне поэтому и не понятно как они станут белыми если это не прописано

Тимофей Павлов

1 year ago

а нет, нашел, там были прописаны а у меня нет, всё заработало, спасибо

Тимофей Павлов

1 year ago

SVG в фоновом режиме CSS | Могу ли я использовать.

.. Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

SVG в фонах CSS

— CR

  • Глобальное использование
    97,98% + 1,16% «=» 99,14%

Метод использования изображений SVG в качестве фона CSS

Chrome
  1. 4: Partial support
  2. 5 — 110: Supported
  3. 111: Supported
  4. 112 — 114: Supported
Edge
  1. 12 — 15: Partial support
  2. 16 — 110: Supported
  3. 111: Supported
Safari
  1. 00% — Not supported»> 3,1: не поддерживается
  2. 3,2 — 4: Частичная поддержка
  3. 5 — 16,3: Поддерживается
  4. 16.4: Поддерживается
  5. 16,5 — TP: поддержал
8
88888888888888 8111488888888888888 8111488888888888888 81114888888888888888 81114888888888888888 8111488888888888888 81148888888888888 811148888888888888888888 г.
  • 4 — 23: Частичная поддержка
  • 24 — 110: Поддерживается
  • 111: Поддерживается
  • 112 — 113: поддержан
    • Opera
    1. 9: не поддерживается
    2. 9.5:
      1. 01% — Not supported»>
      18. : не поддерживается
      19. 9.5:
        3. 37% — Supported»>:
        IE
        1. 5.5 — 8: Not supported
        2. 9 — 10: Supported
        3. 11: Supported
        Chrome for Android
        1. 111: Supported
        Safari on iOS
        1. 3.2 — 4.1: Partial support
        2. 4.2 — 16.3: Supported
        3. 16.4: Supported
        4. 16.5: Supported
        Samsung Internet
        1. 4 — 19.0: Supported
        2. 20: Supported
        Opera Mini
        1. все: Частичная поддержка
        Opera Mobile
        1. 00% — Partial support»> 10 — 12.1: Частичная поддержка
        2. 73: Поддерживается
        UC Browser для Android
          13.4: Поддерживается 9 00013 Android Browser
          1. 2.1 — 2.3: Not supported
          2. 3 — 4.4.4: Supported
          3. 111: Supported
          Firefox for Android
          1. 110: Supported
          QQ Browser
          1. 13.1: Supported
          Baidu Browser
          1. 13,18: Поддержано
          KAIOS BROWSER
          1. 2,5: Поддерживается
          2. 3: Поддержано
          Ресурсы:
          .0175

          Помощники по цвету | Bulma: Бесплатная современная CSS-инфраструктура с открытым исходным кодом на основе Flexbox

          Помощники по цвету

          Изменение цвета текста и/или фона

          Цвет текста #

          Вы можете установить любой элемент в один из 10 цветов или 9 оттенков серого :

          Сорт Цвет Пример
          белый текст hsl(0, 0%, 100%) Hello Bulma
          имеет-текст-черный hsl(0, 0%, 4%)
          		Hello Bulma
          светлый текст hsl(0, 0%, 96%) Hello Bulma
          имеет темный текст hsl(0, 0%, 21%) Hello Bulma
          основной текст hsl(171, 100%, 41%) Hello Bulma
          имеет текстовую ссылку hsl(217, 71%, 53%) Hello Bulma
          имеет текстовую информацию hsl(204, 86%, 53%) Hello Bulma
          имеет-текст-успех hsl(141, 71%, 48%) Hello Bulma
          текстовое предупреждение hsl(48, 100%, 67%) Hello Bulma
          имеет-текст-опасность hsl(348, 100%, 61%)
          		Привет Булма
          Сорт Оттенок Пример
          имеет-текст-черный-бис hsl(0, 0%, 7%) Hello Bulma
          черный текст hsl(0, 0%, 14%) Hello Bulma
          текст серо-темнее hsl(0, 0%, 21%) Hello Bulma
          текст серо-темный hsl(0, 0%, 29%) Привет Булма
          серый текст hsl(0, 0%, 48%) Hello Bulma
          серый текст hsl(0, 0%, 71%) Hello Bulma
          текст серо-светлее
          		hsl(0, 0%, 86%) Hello Bulma
          белый текст hsl(0, 0%, 96%) Привет Бульма
          имеет-текст-белый-бис hsl(0, 0%, 98%) Привет Булма

          С тех пор 0. 9.0

          Вы можете использовать каждый цвет в своих светлых и темных версиях . Просто добавьте *-светлый или *-темный .

          Сорт Светлый/темный цвет Пример
          имеет основной текст hsl(171, 100%, 96%) Hello Bulma
          имеет текстовую ссылку hsl(219, 70%, 96%) Hello Bulma
          имеет текстовый информационный свет hsl(206, 70%, 96%) Hello Bulma
          has-text-success-light hsl(142, 52%, 96%) Hello Bulma
          предупреждающий свет с текстом hsl(48, 100%, 96%) Hello Bulma
          имеет текст опасности hsl(347, 90%, 96%) Hello Bulma
          имеет основной текст темный hsl(171, 100%, 29%) Hello Bulma
          has-text-link-dark hsl(217, 71%, 45%) Hello Bulma
          has-text-info-dark hsl(204, 71%, 39%) Hello Bulma
          has-text-success-dark hsl(141, 53%, 31%) Hello Bulma
          имеет-текст-предупреждение-темный hsl(48, 100%, 29%) Привет Булма
          имеет-текст-опасность-темный hsl(348, 86%, 43%) Привет Булма

          Фоновый цвет #

          Вы можете установить любой элемент в один из 10 цветов или 9 оттенков серого :

          Сорт Фоновый цвет
          белый фон hsl(0, 0%, 100%)
          имеет черный фон hsl(0, 0%, 4%)
          фоновый свет hsl(0, 0%, 96%)
          имеет темный фон hsl(0, 0%, 21%)
          имеет основной фон hsl(171, 100%, 41%)
          имеет фоновую ссылку hsl(217, 71%, 53%)
          имеет фоновую информацию hsl(204, 86%, 53%)
          имеет фоновый успех hsl(141, 71%, 48%)
          фоновое предупреждение hsl(48, 100%, 67%)
          имеет фоновую опасность hsl(348, 100%, 61%)
          Сорт Фоновый оттенок
          имеет-черный-бис hsl(0, 0%, 7%)
          имеет черный фон hsl(0, 0%, 14%)
          имеет-фон-серый-темнее hsl(0, 0%, 21%)
          имеет-фон-серо-темный hsl(0, 0%, 29%)
          имеет серый фон hsl(0, 0%, 48%)
          имеет серый фон hsl(0, 0%, 71%)
          имеет-фон-серый-светлее hsl(0, 0%, 86%)
          белый фон hsl(0, 0%, 96%)
          имеет-фон-белый-бис hsl(0, 0%, 98%)

          С тех пор 0.

    Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *