background

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

• background-attachment;
• background-clip;
• background-color;
• background-image;
• background-position;
• background-repeat;
• background-size.

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

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