Просто напишите способы,а я разберусь, пробовал vh, но адаптивность тогда в 0.
2 ответа
Можно пытаться сделать это через 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.
Попробуй background-size:cover
.
Или можно попробовать background-attachment: fixed
-
background-size: cover
растянет изображение на всю высоту и ширинуbody
,background-attachment: fixed
сделает фон "прокручиваем" вместе со скроллом. Так что не одно из ваших решений здесь неуместно.– De.Minov17 июл 2019 в 17:57 -
я имею ввиду чтобы фото растягивалось и прикасалось границы нижнего экаран, не блоы той белой полосы, то что вы написали уже стоит в свойствах 17 июл 2019 в 17:59
-