background

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Шорткат, позволяющий задать все свойства фона разом. Объединяет в себе:

Пример

Секция статьи "Пример"

Код ниже задаёт чёрную заливку фона, фоновую картинку bkg.png, которая не будет повторяться, будет расположена по центру по вертикали и горизонтали, а также закроет всю площадь родителя.

        
          
          div {  background: #000000 url("bkg.png") no-repeat center / cover;}
          div {
  background: #000000 url("bkg.png") no-repeat center / cover;
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Можно указать одно или несколько значений для разных свойств, разделяя их пробелами. Значения можно писать в любом порядке, браузер сам определит, какое значение к какому свойству относится.

Единственный момент, который стоит учесть — значение для свойства background-size нужно указывать следом за background-position, отделив его при помощи слэша /. Это связано с тем, что значения свойства background-size и свойства background-position схожи, и браузеру надо дать понять, что дальше пойдёт значение для размера фона.

Ни одно из значений не является обязательным, поэтому ненужные можно смело опустить.

Подсказки

Секция статьи "Подсказки"

💡 Как и с любым шорткатом, со свойством background нужно обращаться осторожно. Если потребуется переопределить всего одно из заданных значений, то нужно будет переписать и все остальные.

💡 Если в рамках шортката не задано значение для какого-то из свойств и в коде ниже оно не прописано, то свойству устанавливается значение по умолчанию.

💡 Записанные выше отдельные свойства переопределяются заданным ниже свойством background.