CSS-фоны

Узнайте, как изменить фон элемента с помощью CSS

Фон элемента можно изменить с помощью нескольких свойств CSS:

  • background-color
  • background-image
  • background-clip
  • background-position
  • background-origin
  • background-repeat
  • background-attachment
  • background-size

и сокращенное свойствоbackground, что позволяет сократить определения и сгруппировать их в одну строку.

background-colorпринимает значение цвета, которое может быть одним из ключевых слов цвета илиrgbили жеhslценить:

p {
  background-color: yellow;
}

div { background-color: #333; }

Вместо использования цвета вы можете использовать изображение в качестве фона для элемента, указав URL-адрес местоположения изображения:

div {
  background-image: url(image.png);
}

background-clipпозволяет определить область, используемую фоновым изображением или цветом. Значение по умолчанию -border-box, который простирается до внешнего края границы.

Другие значения

  • padding-boxчтобы расширить фон до края отступа, без границы
  • content-boxчтобы расширить фон до края содержимого, без отступов
  • inheritприменить значение родителя

При использовании изображения в качестве фона вы захотите установить положение размещения изображения с помощьюbackground-positionсвойство:left,right,centerвсе допустимые значения для оси X, иtop,bottomдля оси Y:

div {
  background-position: top right;
}

Если изображение меньше фона, вам необходимо настроить поведение, используяbackground-repeat. Если этоrepeat-x,repeat-yили жеrepeatпо всей оси? Последний - значение по умолчанию. Другое значениеno-repeat.

background-originпозволяет вам выбрать, где должен быть применен фон: ко всему элементу, включая отступы (по умолчанию), используяpadding-box, ко всему элементу, включая границу, используяborder-box, к элементу без заполнения, используяcontent-box.

Сbackground-attachmentмы можем прикрепить фон к области просмотра, чтобы прокрутка не влияла на фон:

div {
  background-attachment: fixed;
}

По умолчанию значение равноscroll. Есть еще одно значение,local. Лучший способ визуализировать их поведение - этоэтот Codepen.

Последнее свойство фона -background-size. Мы можем использовать 3 ключевых слова:auto,coverиcontain.autoпо умолчанию.

coverрасширяет изображение до тех пор, пока весь элемент не будет покрыт фоном.

containперестает расширять фоновое изображение, когда одно измерение (x или y) покрывает весь наименьший край изображения, поэтому оно полностью содержится в элементе.

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

div {
  background-size: 100%;
}

Если вы укажете 2 значения, одно - это ширина, а второе - высота:

div {
  background-size: 800px 600px;
}

Сокращенное свойствоbackgroundпозволяет сократить определения и сгруппировать их в одну строку.

Это пример:

div {
  background: url(bg.png) top left no-repeat;
}

Если вы используете изображение, и изображение не может быть загружено, вы можете установить запасной цвет:

div {
  background: url(image.png) yellow;
}

Вы также можете установить градиент в качестве фона:

div {
  background: linear-gradient(#fff, #333);
}

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: