Верстка слоя-подкладки во всю ширину viewport

В лендинговой верстке дизайнеры часто прибегают к следующему приему — фон одного или нескольких блоков растягивается на всю ширину документа. При этом максимальная ширина содержимого блоков чаще всего ограничена.

Если шаблон изначально верстается с учетом таких особенностей шаблона, то максимальная ширина контентной области ограничивается внутри каждого wrapper-контейнера. Каждый отдельный горизонтальный блок при этом имеет ширину равную 100% ширины документа.

Такая верстка позволит определить настройки фона индивидуально для каждого контейнера, задавая стили для выбранной секции.

Если же изначально использовался общий wrapper с ограничением ширины, а разбивка на отдельные контейнеры трудоёмка (влечет за собой рефакторинг большого числа шаблонов), то есть имеет структуру подобную следующей:

То растянуть фон на всю ширину документа для выбранной секции можно используя следующую технику (добавляем в CSS):

Я использовал псевдо-контейнер, но это может быть и специальный слой в верстке. Смысл в том, что он повторяет размеры секции, но по краям выходит за границы на 9999 пикс, заливая фоном всю горизонталь.

Написать комментарий

Мало букафф? Читайте есчо !

Скрыть/изменить стили выделения в HTML - псевдокласс css::selection

Март 12, 2019 г.

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

Читать

Текст style CSS

Март 31, 2016 г.

Если вы решили разобраться как устроены документы в Интернет, тогда сразу после знакомства с гипертекстовой разметкой (HTML), вам нужно освоить каскадные ...

Читать

 

Комментарии к «Верстка слоя-подкладки во всю ширину viewport»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: