Platform under construction

HTML Links & Media

Intermediate

Background Images

Learn Background Images with practical HTML examples for navigation, images, alt text, media behavior, metadata, accessibility, SEO and live practice.

.hero {
  background: linear-gradient(...), url(hero.webp) center / cover;
}

HTML links and media

Background images are visual styling, not document content.

A background image is set with CSS, not with the img element. That means it is usually decorative or part of visual presentation.

If the image communicates important content, use an img element with alt text instead. If it only creates atmosphere, texture, branding or layout polish, a CSS background can be the right choice.

Good background images need careful contrast, sizing, positioning and fallback colors.

background-image

Adds an image, gradient or multiple backgrounds through CSS.

background-size

Common values are cover and contain.

background-position

Controls which part of the image stays visible.

overlay

A gradient or pseudo-layer that keeps text readable.

Syntax and structure

Use CSS backgrounds for presentation.

A CSS background does not have alt text, so it should not be the only place important information exists.

Hero with readable background treatment

<section class="hero">
  <h1>Learn HTML visually.</h1>
</section>

<style>
  .hero {
    background:
      linear-gradient(rgba(7, 17, 31, .76), rgba(7, 17, 31, .76)),
      url("/assets/img/hero.webp") center / cover;
    color: white;
  }
</style>

Important content hidden in CSS

<section class="hero"></section>

<style>
  .hero {
    background-image: url("sale-with-all-text-inside-image.jpg");
  }
</style>

Rules that matter

Links and media should be useful, stable and understandable.

Clickable and visual HTML affects how people move, scan, trust and share a page. The details are small, but the user experience impact is large.

Use for decoration

Important content belongs in HTML, not only in a background image.

Add fallback color

The section should still work while the image loads or fails.

Protect text contrast

Use overlays or positioning so text stays readable.

Use cover carefully

Cover crops images. Check important parts at multiple screen sizes.

Avoid heavy backgrounds

Large backgrounds can damage performance quickly.

Keep URLs maintainable

Use clear asset paths and optimized files.

Production thinking

Navigation, images and metadata are part of product quality.

Why does this matter?

This matters because visual polish should not hide information. A background image can make a page beautiful, but the page must still communicate without it.

Accessibility

Background images are not announced by screen readers. Any meaning in the image must also exist as real text or an img with alt.

Production note

Background images need real viewport testing. Cropping that looks perfect on desktop can destroy the subject on mobile.

SEO note

Search engines do not get alt text from CSS backgrounds. Use real image markup when the image itself is content.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Remove the gradient overlay and check readability.
Change background-position from center to right.
Add one sentence of real HTML text that would still work without the image.

Practice assignment

Do this before moving to the next lesson.

Create one hero section with a CSS background image.
Add an overlay or color treatment for text contrast.
Explain why the image is decorative or why it should be an img instead.

HTML CSS

Live preview

Self-check

Before you continue, prove that you own this lesson.