The CSS background property is a shorthand for eight related properties: background-color, background-image, background-size, background-repeat, background-position, background-origin, background-clip, and background-attachment. It keeps declarations concise, but specifying it resets unspecified background values to their initial values. section 13.1 section 1.4
Use individual properties when a background needs more than a few settings, especially because shorthand declarations can undo earlier values.
- Use background-color for a solid color that renders behind background images. section 13.1
- Use background-image for file-based images or generated gradients. section 13.1
- Treat background-attachment: fixed cautiously because it can negatively affect page performance. section 13.1
A simple linear gradient
A 400-by-200-pixel element can render a horizontal gradient from white to blue: .fade { height: 200px; width: 400px; background-image: linear-gradient(to right, white, blue); }. The same direction can be expressed with 90deg.
