Course contentsBackgrounds, Borders, and Visual Layers · 16 topics

CSS Foundations

CSS Introduction Selectors and Relationships Cascade, Specificity, and Inheritance Values, Units, and Color

Layout Systems

The Box Model and Sizing Normal Flow, Display, and Positioning Flexbox CSS Grid

Applied CSS Systems

Backgrounds, Borders, and Visual Layers Interactive States and Pseudo-elements Overflow, Stacking Contexts, and Layering Transforms, Transitions, and Animation CSS Architecture, Components, and Maintenance

Responsive and Responsible CSS

Responsive Design and Container Queries Typography and Rhythm Motion, Focus, and Accessibility

CSS 60 min

Backgrounds, Borders, and Visual Layers

Compose resilient surfaces with layered backgrounds, images, borders, radii, and contrast-aware decoration.

Backgrounds paint behind an element's content and border without changing document structure. Multiple background layers are listed from front to back, and each layer can set its own image, position, size, and repetition. A fallback background color still matters when an image is unavailable or transparent.

See the core pattern

Read this rule set from the outside in. Identify the inputs, the decision or transformation, and the result before changing it.

.hero { background-color: #17324d; background-image: linear-gradient(90deg, rgb(23 50 77 / .88), rgb(23 50 77 / .35)), url('/images/home/learning-paths.jpg'); background-size: cover; background-position: center; color: white; border: 2px solid rgb(255 255 255 / .35); border-radius: 1rem; }

Working rules

Keep text readable when a background image fails
Use border radius consistently with overflow and focus states
Treat decorative images as decoration, not essential content

A common mistake

A background image has no alternative-text mechanism, so it must not be the only carrier of essential information.

Guided practice

Build a readable hero that still communicates its message when the image request fails.

Copy the example into the editable notebook below.

Backgrounds, Borders, and Visual Layers CSS Tutorial | SovranCode

CSS DEEP DIVE · ABOUT 30 MIN

Build a resilient layered hero

Read the explanation, predict the visual result, then edit and run a complete example. Finish with a repair, an independent build, and a knowledge check.

Paint layers without changing layout

A background paints inside an element’s border box and does not contribute intrinsic size. Multiple background images are comma-separated and the first layer is painted closest to the viewer. Each list-valued background property aligns by layer, so a missing value repeats according to CSS rules. Use the shorthand carefully: it resets omitted background subproperties. A color may appear only in the final layer of the shorthand. Keep a deliberate color fallback so text remains readable if a remote image fails, loads slowly, or is suppressed. Inspect the computed shorthand when a later rule unexpectedly removes a layer.

Choose cover, contain, and positioning intentionally

background-size: cover fills the painting area but can crop the image; contain preserves the complete image but can leave unused space. Neither choice makes important text embedded in an image accessible. Positioning controls which part remains visible as cropping changes, so test narrow and wide boxes using the actual asset. For content images that need alternative text, dimensions, or responsive source selection, use an img or picture element instead. Background attachment effects can behave differently on mobile and may create performance or motion problems; they are decoration, not a requirement for a strong layout.

Borders and radii define edges, not meaning

Borders occupy box-model space unless sizing accounts for them. An outline does not affect layout and is commonly useful for focus indicators. Border radius rounds each corner, but a child background or image can still extend beyond the curve unless clipping is intentionally applied. Avoid overflow: hidden merely to force rounded corners when it would clip focus rings, popovers, or content. Logical border properties can follow writing direction. Decorative separators should support an existing grouping that remains understandable without the line. Test high-contrast or forced-color modes because chosen border and background colors may be replaced.

Delete only the image URL, then the gradient, and verify which fallback paints the surface. Narrow the preview to see which part of the image is cropped.

Saved CSS practice

Edit the CSS inside the style element. Account work syncs; guest work stays on this device.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { margin:0; padding:2rem; font:1rem/1.7 system-ui; color:#142536; }
.hero { max-width:48rem; padding:clamp(2rem,7vw,5rem); color:white; background-color:#17324d; background-image:linear-gradient(90deg,rgb(23 50 77 / .96),rgb(23 50 77 / .38)),url("/images/home/learning-paths.jpg"); background-size:cover; background-position:center; border:2px solid #8ba3ba; border-radius:1rem; }
.hero a { color:white; text-underline-offset:.25em; }
.eyebrow { font-weight:800; letter-spacing:.1em; }
</style>
</head>
<body>
<section class="hero"><p class="eyebrow">CSS FIELD GUIDE</p><h1>Layered surfaces without fragile text</h1><p>The message remains real HTML while CSS supplies the atmosphere.</p><a href="#details">Read the design notes</a></section><p id="details">Remove the image layer and verify that every word remains readable.</p>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { margin:0; padding:2rem; font:1rem/1.7 system-ui; color:#142536; }
.hero { max-width:48rem; padding:clamp(2rem,7vw,5rem); color:white; background-color:#17324d; background-image:linear-gradient(90deg,rgb(23 50 77 / .96),rgb(23 50 77 / .38)),url("/images/home/learning-paths.jpg"); background-size:cover; background-position:center; border:2px solid #8ba3ba; border-radius:1rem; }
.hero a { color:white; text-underline-offset:.25em; }
.eyebrow { font-weight:800; letter-spacing:.1em; }
</style>
</head>
<body>
<section class="hero"><p class="eyebrow">CSS FIELD GUIDE</p><h1>Layered surfaces without fragile text</h1><p>The message remains real HTML while CSS supplies the atmosphere.</p><a href="#details">Read the design notes</a></section><p id="details">Remove the image layer and verify that every word remains readable.</p>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run in new window

Loading saved work…

Edit the CSS inside the style element and compare the result in the live preview. Your work saves automatically; you can also download a local copy.

DEBUGGING CHALLENGE

Find the faulty assumption

Explain the problem and write your repair before opening the solution.

.hero { background: url("hero.jpg"); color: white; }

Reveal repair and explanation

.hero { background-color: #17324d; background-image: linear-gradient(rgb(23 50 77 / .8), rgb(23 50 77 / .8)), url("hero.jpg"); color: white; }

The broken version has no dependable surface behind white text if the image fails or contains a pale region. A fallback color and controlled overlay create a more predictable contrast relationship.

INDEPENDENT LAB

Build it without copying

Create a promotional panel with two decorative background layers, a dependable fallback color, rounded edges, and a real HTML call to action.

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Build a resilient layered hero lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Build a resilient layered hero</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Build a resilient layered hero lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Build a resilient layered hero</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Self-review checklist

All text remains readable with background images disabled.Cropping is tested at narrow and wide widths without hiding essential content.Keyboard focus remains visible and is not clipped by the rounded container.

What did you test and change?

Loading saved work…

This lab is saved separately from the worked example. The checklist is a self-review, not an automatic grade.

CSS knowledge check

Answer both questions correctly to pass this lesson check. Account scores are recomputed on the server. This is a learning check, not certification.

1. Which background layer is painted closest to the viewer?The first listed imageThe last listed imageThe background color

2. When should an image normally be an img instead of a CSS background?When it conveys content that needs alternative textWhenever it has rounded cornersOnly when it is smaller than 1 MB

Loading saved work…