2.1Backgrounds, overlays & effects
The essentials in 30 seconds
- A container's background (Style tab): solid color, gradient, image or video.
- Text over an image becomes unreadable: add an overlay (semi-transparent layer) to keep the contrast.
- Effects: shadows (box-shadow), rounding (border-radius), borders — in moderation.
Through-line — Nadia dresses the banner
Nadia wants a banner with a nice workshop photo in the background and the title over it. Problem: on the light photo, the white title disappears. She adds a dark semi-transparent overlay: the text becomes readable again, the photo stays visible. Then she rounds the cards' corners for a modern look.
Continues level 1 — Nadia moves from structure to rich design.
1. Backgrounds and readability
A container can take a background (Style tab): solid color, gradient, background image or even video. For an image, you set the framing and the attachment ("fixed" creates a slight parallax effect). But putting text over an image is the classic trap: depending on the area, the text becomes unreadable.
The solution: an overlay — a semi-transparent layer (color or gradient) placed between the image and the text. Nadia adds a dark overlay at 40%: the photo stays visible, the title becomes crisp again. It's a readability reflex.
2. Effects in moderation
Effects add depth: shadows (box-shadow) to lift a card, rounding (border-radius) for a soft look, borders to delimit. Applied finely, they modernize; in excess, they weigh things down and date the site.
Nadia slightly rounds the project cards and adds a subtle shadow on hover. Rule: each effect must serve readability or hierarchy, not decorate for decoration's sake.
🔎 Concrete example — A readable banner (Nadia's case)
Banner container:
- background = workshop image (framed, normal attachment)
- overlay = black at 40%
- white title on top → readable
- cards: border-radius 8px + subtle shadow on hover
→ A nice image AND crisp text.Result: rich design without sacrificing readability.
Lesson: overlay first, effects next, in moderation.
Section vocabulary
- Background
- A container's background: color, gradient, image or video (Style tab).
Simple example: a workshop photo as a banner background.
What it is not: confusing the container background with an inserted image (Image widget).
Reflex: the background dresses the box; the Image widget displays a visual.
- Overlay
- A semi-transparent layer placed over a background image to keep the text readable.
Simple example: black overlay at 40% under the banner title.
What it is not: putting text directly on a contrasted image.
Reflex: text over image → systematic overlay.
- Attachment (parallax)
- A background image setting: "fixed" creates a slight depth effect on scroll.
Simple example: fixed background for a mood section.
What it is not: overusing parallax everywhere (heavy, tiring).
Reflex: occasional parallax, never on the whole page.
- Effects (shadows, rounding)
- Shadows (box-shadow), rounding (border-radius), borders to add depth.
Simple example: rounded cards with a subtle shadow on hover.
What it is not: stacking strong shadows and garish borders.
Reflex: an effect must serve readability or hierarchy.
- Text-over-image readability
- Guaranteeing the contrast of text placed over a visual background.
Simple example: overlay + adapted text color.
What it is not: judging it readable on your screen without checking the light areas.
Reflex: check the text across the whole width of the image.
In practice — Dressing a section cleanly
- Give a container a background image (Style tab) and frame it.
- Add a semi-transparent overlay and set its opacity.
- Place a title on top and check its readability across the whole width.
- Add rounding and a subtle shadow to the cards, in moderation.
Ready-to-say script — justifying the overlay to the client (20 s)
"I kept your nice workshop photo in the background, with a slight dark veil over it: that's what lets the title stay perfectly readable, whatever the brightness of the photo. Nothing is hidden, just made crisp."
Explain the overlay as a readability service, not a darkening.
Copy-paste template — visual background check
CONTAINER: _______________
BACKGROUND: color / gradient / image / video
IMAGE: framing ok? attachment (normal/fixed): _____
TEXT OVER IMAGE? → OVERLAY: color ___ opacity ___ %
TEXT CONTRAST CHECKED (whole width): yes / no
EFFECTS: rounding ___ px, shadow (subtle): yes / noPhoto banner
Image + overlay + title: the "wow" effect without losing readability.
Clean section
Solid color or light gradient: sometimes more pro than an image.
Card
White background, slight rounding, subtle shadow: a modern, crisp look.
Performance
Heavy background video: reserve for strong cases, compress (see 5.1).
✓ Best practices
- Add an overlay whenever there's text over an image.
- Use effects in moderation.
- Check contrast across the whole width.
✗ Common pitfalls
- Text directly over a contrasted image.
- Parallax and background videos everywhere (heavy).
- Garish shadows/borders.
Key takeaways
- Background: color, gradient, image, video.
- Overlay = readability reflex.
- Effects (shadows, rounding) in moderation.
- Always check the text contrast.
48h challenge — apply tomorrow
Create a section with a background image + overlay + readable title. Test by lowering/raising the overlay opacity until the contrast is right. Add a subtle rounding to a card. 20 minutes.
- I set a background (image, gradient) cleanly.
- I add an overlay for text readability.
- I use effects in moderation.
Frequently asked questions
How do I make a title readable on a photo?
By placing a semi-transparent overlay between the background image and the text, and choosing a contrasted text color. Check across the whole width of the image.
Should I use background videos?
Sparingly: a background video is heavy (performance, mobile). Reserve it for high-impact sections and compress it; otherwise, an image or a gradient is enough.
Do shadows and rounding date a site?
In excess, yes. Used finely (slight rounding, subtle shadow), they modernize instead. Each effect must serve readability or hierarchy.
Nadia's white title disappears in places on the workshop photo in the background. What to do?