Background, overlay and parallax
The visual treatment of the subheader background, on courses and on lessons.
Where these settings are
Settings → POM LMS → Course → Course subheader and → Lesson → Lesson subheader. Identical fields on both sides, and both require Override default subheader settings? to be on.
The problem an overlay solves
A title over a photograph is unreadable whenever the photograph is busy or light where the text sits. You cannot fix that by choosing a title color, because every course has a different image.
An overlay puts a translucent layer between the image and the text. It makes any image safe to write on.
Overlay settings
| Setting | Options |
|---|---|
| Add overlay? | Enables the rest |
| Overlay style | Solid color or Gradient |
| Overlay color | For solid overlays, from the theme palette |
| Overlay gradient color 1 and 2 | For gradients |
| Overlay gradient orientation | Eight directions, each labeled with an arrow — for example ↑ (From bottom to top) |
| Overlay alpha | How opaque the overlay is |
Solid
One color at one opacity across the whole banner. Predictable, and the right choice when you just need contrast.
A dark solid overlay at moderate alpha with white titles works on any photograph.
Gradient
Two colors blending in one of eight directions. Use it to darken only where the text is: a gradient running ↑ (From bottom to top), dark at the bottom and transparent at the top, keeps the image visible while making the lower area readable.
Pick the orientation from where your title sits.
Alpha
The one setting to spend time on.
- Too low — the title is still unreadable on light images.
- Too high — the photograph disappears and you have a colored rectangle.
Test with your lightest and busiest course image, not a convenient one. Turn it up until that image is comfortable, then stop.
Parallax
| Setting | Effect |
|---|---|
| Add parallax effect? | The background moves more slowly than the page as you scroll |
| Add opacity reduction effect when scrolling? | The banner fades out as the page scrolls |
Both are decoration. Both are worth a moment's thought before enabling on lesson pages, where students scroll constantly:
- Parallax on every lesson is motion students did not ask for, and it can be uncomfortable for people sensitive to movement.
- Fading works well on a tall course banner, where the content should take over as the student reads.
A reasonable split: effects on the course subheader, none on lessons.
Full-size backgrounds and page weight
The subheader background is a large image loaded on every course and lesson page. Compress before uploading — a 4 MB photograph behind a banner is the most expensive decoration on your site, and it is felt hardest by exactly the students on mobile data.
Verify
- Configure the overlay and save.
- Open your lightest-image course and confirm the title is readable.
- Open your darkest and confirm the banner is not muddy.
- Scroll a course page and confirm parallax and fading behave.
- Repeat on a lesson page and decide whether the effects belong there.
- Check on a phone, where parallax can behave differently.