background-color sets a solid colour. background-image: url() adds an image. background-size: cover fills the container. linear-gradient(to right, #3b82f6, #8b5cf6) creates a gradient without any image files.
Backgrounds
div {
background-color: #f3f4f6;
background-image: url("pattern.png");
background-size: cover; /* or contain, 200px */
background-position: center;
background-repeat: no-repeat;
/* Gradient */
background: linear-gradient(135deg, #667eea, #764ba2);
background: radial-gradient(circle, #3b82f6, #1e40af);
/* Multiple backgrounds */
background: url("icon.png") no-repeat right 16px center,
linear-gradient(to right, #f3f4f6, white);
}