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

Question

[Роман Говоров]

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

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

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

Я сделал контейнер, картинку вставил в контент, а контент сделал position:absolute;
Но мне кажется есть лучше варианты)

Answer 1

[Daniel Tkachenko]

Отрывок кода, может Вам поможет разобраться..

background-image: url(../img/background-image.jpg);
	background-position: center;
	-webkit-background-size: cover;
	background-size: cover;

Answer 2

[Владимир Будаков]

Такие лэндинги сейчас маркетологи клепают без помощи верстальщиков: конструкторы, либо Elementor в WP.

Answer 3

[tendkuh]

Верхняя картинка полностью растягивается по ширине независимо от разрешения, а её нижняя часть сделана белым цветом, чтобы не контрастировать на фоне нижнего блока, который стыкуется с вашим изображением:

рис. Что-бы понять как это работает, надо сделать CTRL+SCROLLDOWN и CTRL+SCROLLUP

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

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

https://www.w3schools.com/css/css_rwd_images.asp