Допустим, вам нужно сверстать этаж‑плашку с изображением на фоне, с заголовком и текстом внутри.

Есть несколько распространённых ошибок при вёрстке таких этажей:

  1. Отступы ставятся у внутренних элементов плашки, вместо внутренних отступов у самой плашки.

  2. Фон изображения ставится элементом 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы