Глиф Учебники

Как сделать фон картинкой

Справочник · HTML и CSS · 2 минуты чтения

CSS
.hero {
  min-height: 400px;
  background-image: url("../images/forest.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

То же одной строкой:

CSS
.hero {
  min-height: 400px;
  background: url("../images/forest.jpg") center / cover no-repeat;
}

В короткой записи размер пишется сразу после положения, через косую черту: center / cover.

Путь — от CSS-файла

Путь в url() считается от файла стилей, а не от страницы. Если страница — index.html, стили — в css/style.css, а картинка — в images/forest.jpg, то из папки css нужно подняться на уровень: ../images/forest.jpg. В теге <style> и в атрибуте style путь, наоборот, считается от страницы.

Текст поверх фона

На пёстрой фотографии текст плохо читается. Затемните её полупрозрачным слоем — градиент ставится первым, поверх картинки:

CSS
.hero {
  min-height: 400px;
  background-image:
    linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)),
    url("../images/forest.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
}

Несколько фонов перечисляют через запятую: первый лежит сверху.

Фон всей страницы

CSS
body {
  background-color: #2e4a3a;
  background-image: url("../images/pattern.png");
}

Здесь картинка-узор повторяется плиткой (повтор включён по умолчанию). background-color — запасной цвет: его видно, пока картинка грузится или если не загрузилась. Подберите его похожим на картинку, чтобы светлый текст не потерялся на белом.

Подводные камни