CSS backgrounds: reserve background images for decoration

How the rule works

A receipt callout uses a subtle gradient behind text. The underlying status and explanation remain in HTML, so the callout is understandable when CSS is disabled or colors are changed by the user. Avoid putting a scanned document, barcode, or safety instruction in a background-image; those need a content image with a text alternative and access to the full asset. The sample uses a solid color as a base before a gradient. Verify text contrast over every point of the gradient, especially after theme overrides. A decorative image may still cost bandwidth even if it adds no information.

.receipt-callout {
  color: #183047;
  background-color: #e8f1f4;
  background-image: linear-gradient(120deg, #e8f1f4, #f5f7e9);
  border-inline-start: .3rem solid #175b44;
  padding: 1rem;
}

Cost and verification

A CSS gradient is generated without an image request; a URL background would add one. A gradient can still cost paint work over large surfaces, so avoid animating it across the whole page without a need. Check a forced-colors mode and print preview, where decorative backgrounds may disappear. The border gives the callout some structure, but the status must remain explicit in text.

Common Mistakes

• Do not put a receipt scan in background-image and call it accessible evidence.
• Do not rely on a background color as the sole signal of status.
• Do not assume a decorative background survives printing or forced colors.

Connected lessons

• CSS Type and Media
• CSS color and contrast: pair text with its real surface
• CSS dark mode and forced colors: honor distinct user settings
• HTML image alt text: describe function or information, not pixels alone

Property decisions

• CSS background size and position: crop decoration deliberately
• CSS filter effects: use image treatment without obscuring evidence

Related behavior

• CSS clip-path: clip decoration without hiding required content

Further type and color decisions

• CSS image-set: offer resolution choices for decoration
• CSS background-clip text: keep a decorative headline readable

Further rendering decisions

• CSS background-attachment local: move decoration with scrolled content