Background Colors and Images

Use CSS backgrounds to place a solid color or an image behind an element’s content.

background-color paints a single color. background-image paints an image over that color where the image has visible pixels. Images can be loaded with url(); gradients are also valid CSS background images.

The image does not contribute semantic information. If an image is essential to understanding a page, use an HTML <img> with appropriate alt text instead of relying on a decorative background.

The painted layers are separate: an image layer can appear over a background color. Image-loading failure leaves the color visible.

Apply a background to a banner without affecting nearby elements.

HTML

<section class="banner"><h3>Weekend guide</h3><p>Simple visual hierarchy</p></section>

CSS

.banner { background-color: #dbeafe; padding: 18px; border-radius: 12px; }
.banner h3 { color: #1d4ed8; margin: 0 0 6px; }

Rendered output

Observe: The whole banner uses a light blue surface behind its content.

Use a self-contained SVG image URL so this lesson works without an external image host.

HTML

<div class="image-panel"><strong>Decorative pattern</strong></div>

CSS

.image-panel { background-color: #e2e8f0; background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22320%22%20height=%22120%22%3E%3Crect%20width=%22320%22%20height=%22120%22%20fill=%22%23bfdbfe%22/%3E%3Ccircle%20cx=%2280%22%20cy=%2260%22%20r=%2236%22%20fill=%22%230f766e%22/%3E%3Cpath%20d=%22M170%20100L235%2020L300%20100Z%22%20fill=%22%237c3aed%22/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: cover; min-height: 110px; padding: 14px; font-weight: 700; color: #0f172a; }
.image-panel strong { display: inline-block; padding: 5px 9px; background: #fff; border-radius: 5px; }

Rendered output

Observe: The background image fills the area while the text remains real HTML content.

The painted layers are separate: an image layer can appear over a background color. Image-loading failure leaves the color visible.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not put essential information only into CSS background images.
• A background image is not the same thing as an HTML image with alt text.

Change the banner background color. In a real project, replace the sample image URL with a relative asset path, such as url("images/pattern.svg").

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use background images for decoration and real HTML images for meaningful content.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.