RGameShow
@RGameShow
В поисках ответов на глупые вопросы

Как создают такие Landing Page?

Имеется шаблон: ПРИМЕР

Как обычно делают подобные банеры, шапки, паралаксы и тд, когда картинка во весь рост и не обрезается внизу?

Я про вот эту: IMG

Я сделал контейнер, картинку вставил в контент, а контент сделал position:absolute;
Но мне кажется есть лучше варианты)
  • Вопрос задан
  • 234 просмотра
Пригласить эксперта
Ответы на вопрос 3
Daniel_T
@Daniel_T
HTML-верстальщик
Отрывок кода, может Вам поможет разобраться..
background-image: url(../img/background-image.jpg);
	background-position: center;
	-webkit-background-size: cover;
	background-size: cover;
Ответ написан
Комментировать
Такие лэндинги сейчас маркетологи клепают без помощи верстальщиков: конструкторы, либо Elementor в WP.
Ответ написан
Комментировать
tendkuh
@tendkuh
PHP sucks, it's very important to remember, folks
Верхняя картинка полностью растягивается по ширине независимо от разрешения, а её нижняя часть сделана белым цветом, чтобы не контрастировать на фоне нижнего блока, который стыкуется с вашим изображением:
5d2d4e951dccc629801612.gif
рис. Что-бы понять как это работает, надо сделать CTRL+SCROLLDOWN и CTRL+SCROLLUP

Поскрольте сайт в браузере с зажатым контрол вверх и вниз, и вы увидите что нижний блок становится то выше, то ниже. Это потому что, высота изображения стало быть выставлена в auto; Вы заметите грань над надписью "We specialize in", если будете смотреть внимательно, она ровная, между картинкой и низом, в какойто момент она заметно заползает на изображение при масштабировании. Но по факту, это изображение прячется под неё, когда оно не вмещается

В соседнем ответе вам правильно сказали про стилизацию. Под "Стилизацией" они в данном случае подразумевают рисование изображения, согласно блокам с которыми оно будет соприкосаться при изменения разрешения экрана.

https://www.w3schools.com/css/css_rwd_images.asp
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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