Background Images

Understand the topic

A CSS background image is part of presentation rather than document content. It has no alt attribute, so meaningful information must also exist in text or an img element. background-size controls sizing, background-repeat controls repetition, and background-position controls alignment. Always supply a fallback color and ensure foreground text remains readable.

Worked example

<section style="background: #f0fdf4 url(/assets/icons/kanbritech_favicon.png) right 1rem center / 48px 48px no-repeat; padding: 2rem 5rem 2rem 1rem; color: #14532d;">
  <h2>Academy notices</h2>
  <p>Registration opens on Monday.</p>
</section>

The emblem is decorative because the heading already identifies the content. The fallback background color remains if the file is unavailable.

Practice

Set a non-repeating decorative background image at the top right of a header.

header { background-image: url("decoration.png"); background-repeat: no-repeat; background-position: right top; }

Common mistake

Do not put essential instructions only inside a background image. They may disappear in print, high contrast modes, or failed downloads.

HTML documentation