The CSS `background-color` property paints a color behind an element’s content and padding. It can make text readable, distinguish a control, or provide a fallback behind a background image. For a card with a photograph, start with the outer card, then style the content panel inside it. section 5.4 section 9.3.1
A readable card over a photograph
Give the outer card a turquoise fallback with `background-color: #3a8491`. Then give its inner panel `background-color: rgba(0, 0, 0, .75)`: the partly transparent black lets the photograph show through while helping light text remain legible. Add padding so the text does not sit against the panel’s edge. section 5.4.1 section 5.4.2
Listing 5.12 Card content styles
main > section > div { #1
background-color: rgba(0, 0, 0, .75); #1
margin: 1rem; #1
padding: 1rem; #1
color: whitesmoke; #1
text-align: center; #1
font: 14px "Rubik", sans-serif; #1
} #1
section h2 { #2
font-size: 1.3rem; #2
font-weight: bold; #2
line-height: 1.2; #2
} #2
section p { #3
font: italic 1.125rem "Cardo", cursive; #3
line-height: 1.35; #3
} #3
The card-content CSS pairs a translucent background with light text, margin, and padding. section 5.4.2
A background image appears on top of its background color. Keep the color even when an image uses `background-size: cover`: it can show while the image loads, if loading fails, or through transparent parts. The shorthand `background: url("bg.jpeg") left top / cover blue;` combines the image, position, size, and color in one declaration. section 9.3.1
Use the same property for smaller visual decisions:
- Make a card link stand out with a yellow-orange background; darken it on hover and retain a visible focus outline. section 5.4.2
- When centering a page with `max-width` and auto margins, put the page color on `html` so extra-wide windows do not show white side bands. section 4.5.3
- After `appearance: none` removes native radio-button and checkbox styling, set their background color explicitly. An empty custom check-mark box also needs content or a background to become visible. section 10.3.3 section 10.3.5
