The CSS background-size property controls the dimensions of an element’s background image. The value cover scales the image to fill the element while preserving its proportions; differing aspect ratios can clip part of the image. section 5.3.2 section 9.3.1
Use the main sizing options according to the visual result you need:
- Choose cover when the image must fill the entire card or heading without leaving whitespace; excess image may be clipped. section 5.4.1 section 9.3.1
- Choose contain when no part of the image should be clipped, accepting that the element may not be completely filled. section 9.3.1
- Add a background color behind the image as a fallback for transparent, undersized, loading, or failed images. section 5.4.1 section 9.3.1
Hotel summary cards
Apply background-size: cover to each card section so its resort photograph fills the card. Pair it with a turquoise background-color and border-radius for a visible fallback and softened corners. section 5.4.1
Listing 5.11 Card container styles
main > section {
background-size: cover;
background-color: #3a8491;
border-radius: 4px;
}
Inspect the compact card rule that combines background-size: cover with a fallback color and rounded corners. section 5.4.1
