В чем разница между свойствами background-color и background

background-color устанавливает только цвет фона элемента.

background - это сокращенное свойство, которое может включать в себя:

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

Пример:

/* Только цвет фона */
div {
  background-color: #f0f0f0;
}

/* Комплексный фон */
div {
  background: url('image.jpg') no-repeat center / cover #f0f0f0;
}

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