Типовые решения в вёрстке
Как сверстать плашку с текстом и фоном
Типовые решения в вёрстке
Как сверстать плашку с текстом и фоном
Допустим, вам нужно сверстать этаж‑плашку с изображением на фоне, с заголовком и текстом внутри.
Есть несколько распространённых ошибок при вёрстке таких этажей:
Отступы ставятся у внутренних элементов плашки, вместо внутренних отступов у самой плашки.
Фон изображения ставится элементом
img, вместо фона плашки.
Возьмём этаж из совета про обёртку для страницы и немного изменим его:
ХТМЛ‑код такого этажа предельно прост, здесь не нужно ничего изобретать:
<div class="banner">
<h1>Межпланетный диабаз: основные моменты</h1>
<p>Рейтинг притягивает онтогенез речи, независимо от психического состояния пациента. Аффинное преобразование, например, дает осциллятор. Сверхпроводник отталкивает погранслой.</p>
</div>
Стилизуем плашку. Внутренние поля плашки — свойство плашки, поэтому их нужно задавать здесь же, а не у внутренних элементов:
.banner {
min-height: 390px;
padding: 50px 50px 100px 30px;
border-radius: 20px;
color: #fff;
}
Мы не задаём никаких ограничений размеров плашки, кроме минимальной высоты. Ширина — ответственность обёртки страницы, а высота может плавать, в зависимости от содержимого. Если у вас на плашке железобетонно зафиксированный текст, а плашка должна быть какой‑то определённой высоты, то можно задать.
Добавим изображение как фон плашки:
.banner {
min-height: 390px;
padding: 50px 50px 100px 30px;
border-radius: 20px;
color: #fff;
background-color: #cacaca; // цвет фона
background-image: url("/src/images/splash.jpg"); // путь к изображению
background-repeat: no-repeat; // не повторять изображение ни по горизонтали, ни по вертикали
background-position: 50% 100%; // расположить изображение по центру и прижать к низу элемента
background-size: cover; // вписать изображение в контейнер, чтобы не было зазоров
}
Можно сократить:
.banner {
min-height: 390px;
padding: 50px 50px 100px 30px;
border-radius: 20px;
color: #fff;
background: #cacaca url("/src/images/splash.jpg") no-repeat 50% 100% / cover;
}
Содержимое плашки может быть каким угодно и это никак не должно влиять на плашку, кроме изменения высоты. Поэтому добавим условные стили, которые подойдут под наш макет:
h1 {
max-width: 740px;
margin: 0 0 40px;
font-size: 48px;
line-height: 50px;
font-weight: normal;
}
p {
max-width: 740px;
margin: 0 0 20px;
}
Вот и всё. Результат на Кодсендбоксе.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.