1

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

Просто напишите способы,а я разберусь, пробовал vh, но адаптивность тогда в 0.

2 ответа 2

0

Можно пытаться сделать это через background-size, но как видно на демо - это не вариант.

body {
  height: 1000px; /* для примера выставим высоту больше, чтобы посмотреть что будет после того как проскроллим. */
  background-color: red;
  background-image: url('https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg');
  background-repeat: no-repeat;
  background-position: top center; /* изображение по ширине будет от центра картинки, а по высоте от верха */
  background-size: auto 100vh; /* Тут самое основное, auto - это размер по ширине, он будет выстраиваться пропорционально размеру картинки. 100vh - это размер по высоте, т.е. в нашем случае 100vh равносилен 100% высоте !экрана! (вьюпорта). */
}

Из чего я предлагаю следующее - использовать псевдоэлемент, который будет равен ширине и высоте экрана, будет находиться вверху страницы (или в нужной высоте от границы), и картинка в нём.

Пример:

body {
  height: 1000px;
  background: red;
}
 
body::before {
  content: '';
  display: block;
  width: 100%;
  height: 100vh; /* Высота экрана */
  background-image: url('https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  left: 0; top: 0; right: 0;
  z-index: -1; /* Важно */
  pointer-events: none; /* Отключим ему таргет, на всякий пожарный.. */
}

P.s. вместо псевдоэлемента можно использовать что-нибудь другое, <div> например, но тогда уже придётся лезть ещё и в HTML, а данное решение только в CSS.

1
  • спасибо большое, изначально и думал реализовать псевдоэлементами
    – filicaliva
    17 июл 2019 в 18:20
0

Попробуй background-size:cover. Или можно попробовать background-attachment: fixed

3
  • background-size: cover растянет изображение на всю высоту и ширину body, background-attachment: fixed сделает фон "прокручиваем" вместе со скроллом. Так что не одно из ваших решений здесь неуместно.
    – De.Minov
    17 июл 2019 в 17:57
  • я имею ввиду чтобы фото растягивалось и прикасалось границы нижнего экаран, не блоы той белой полосы, то что вы написали уже стоит в свойствах
    – filicaliva
    17 июл 2019 в 17:59
  • картинка в background или это элемент img?
    – Daniel
    17 июл 2019 в 18:11

Ваш ответ

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

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