Backgrounds
background-color fills an element with one flat, solid color simple and reliable. background-image goes further, letting you use a picture (url('photo.jpg')) or a gradient. A gradient like linear-gradient(90deg, #1E2A5A, #3E5AA6) blends two or more colors smoothly across a direction you choose 90deg means left-to-right. Backgrounds aren't limited to big page sections; they apply to almost any element at all a single button, a small card, even one word wrapped in a <span>. Because image files take time to download, it's good practice to also set a background-color as a fallback visitors briefly see a solid color instead of a blank gap while the image loads, or forever if it fails to load at all.
Why this matters
- ·Gradients add visual depth and interest without needing an image file at all
- ·A background sets the tone of a whole section instantly, before any content loads
- ·Setting a fallback background-color prevents an awkward blank gap while images load
Common mistakes
- ·A background image with no fallback color leaves an ugly blank gap while it loads or if it fails
- ·Busy, high-contrast background images can make text placed on top hard to read
- ·Using too many different gradients across a page makes the design feel inconsistent
Frequently asked questions
Yes background-color shows through as a fallback if the image fails to load, or behind transparent parts of it.
Practice questions
Question 1
Give a div a solid background color and white text, using the external method.
Question 2
Create a two-color gradient banner using the inline method.
Quick check
Just for this topic answer honestly, then check yourself.
1 / 10