Справочник HTML & CSS

background

Сокращённая запись всех свойств фона: цвета, картинки, положения, размера и повторения.

Синтаксис

background: color image position / size repeat;

Значения

Параметр	Тип	Описание
color	color	Цвет фона.
linear-gradient()	function	Градиент — он считается картинкой.
url()	function	Картинка из файла.

Примеры

Цвет и градиент:

<div style="background: lightskyblue; padding: 12px;">A plain color</div>
<div style="background: linear-gradient(to right, gold, tomato); padding: 12px;">A gradient</div>

Фотография на весь блок — положение и размер разделяет косая черта:

<style>
  .hero {
    height: 120px;
    background: url(/media/photo-800x500.jpg) center / cover no-repeat;
    color: white;
    padding: 12px;
  }
</style>
 
<div class="hero">A photo as a background</div>

Примечания

background сбрасывает все свойства фона, которых в нём нет. Если нужно поменять только цвет, пишите background-color — так вы не сотрёте картинку, заданную в другом месте.

См. также

background-color — Цвет фона элемента.
background-image — Одна или несколько фоновых картинок: файлы или градиенты.
background-size — Размер фоновой картинки.
linear-gradient() — Плавный переход между цветами вдоль прямой — используется как фоновая картинка.

Вопросы и ответы по теме

В учебнике

Фон и рамки — Фоновые картинки, их повтор, размер и положение, виды рамок, скругление углов и outline.

Спасибо, что читаете!