The CSS `background` property lets you set related background values in one declaration. Instead of writing separate rules for an image, its position and size, and a color, you can write `background: url("bg.jpeg") left top / cover blue;`. section 9.3.1
Read that declaration from left to right:
- `url("bg.jpeg")` supplies the image; `left top` positions it; `/ cover` sizes it to cover the element; and `blue` supplies a color behind it. section 9.3.1
- The image appears over the color. The color can show through a transparent image, fill uncovered space, or remain visible while an image loads or fails to load. section 9.3.1
- `cover` fills the element without distorting the image, but may clip it when their shapes differ. Use `contain` when avoiding clipping matters more. section 9.3.1
Choose the amount of control you need
A card can use the shorthand for a positioned photo and fallback color. For a curved gradient behind a profile picture, separate `background-image`, `background-size`, `background-position`, and `background-repeat` declarations make each adjustment clear: the gradient is enlarged, moved upward, and prevented from repeating. section 9.3.1 section 6.6
The shorthand also works for simpler jobs: `background: #010101;` gives a page a dark backdrop, while `background: none;` removes a button’s default gray background before adding custom styles. section 5.5 section 8.2.2
Listing 9.12 Background image for the front and back of the card
.card-item__side{
height: 100%;
width: 100%;
background: url("bg.jpeg") left top / cover blue;
}
See the complete shorthand declaration applied to the rule shared by both sides of a credit card. section 9.3.1
