About this block
A full-screen opening section that puts a large photo behind your headline and keeps the text readable with a gradient overlay. The gradient is darker at the top and bottom and lighter in the middle, so the photo still shows through behind the words. The overlay uses your theme's text colour, so it follows your palette instead of a flat black film.
When to use it
- Your business has a strong photo that sells it on its own: a venue, a finished project, a team at work.
- You want the first screen to feel big and confident, with one clear message and one main action.
- Text over a photo has been hard to read and a flat dark overlay looked muddy.
- Restaurants, studios, trades, events, and agencies where the place or the work is the proof.
What's inside
- A section at least 85% of the screen tall, with the content centered both ways.
- A cover photo that fills the section. From tablet width up it stays fixed while the page scrolls, for a light parallax feel.
- A top-to-bottom gradient overlay (90% → 50% → 80%) between the photo and the text.
- An eyebrow line, an h1 headline, and a supporting paragraph, all centered and capped at a readable width.
- A primary button and an outline button that stack on phones and sit side by side from tablet width up.
How to customize it
- Replace the photo with your own. Wide, well-lit photos with a calm area in the middle work best behind text.
- Write a headline that says what you do and for whom, then point both buttons at your real pages.
- If the photo is busy, raise the middle of the gradient (the 50% stop) so the text has more contrast. If it's dark already, lower it.
- Swap the gradient to your primary colour for a branded look: change the overlay's from-, via- and to- colours from base-content to primary.
Questions
- How do I make text readable on a background photo?
- Put a gradient overlay between the photo and the text, darker where the text sits. This block does that with three stops so the photo stays visible in the middle.
- Is the background photo bad for page speed?
- A large photo is the heaviest part of most heroes. Upload a well-compressed image around 1600px wide; PageHub serves it through its image CDN.
- Why does the photo stay still when I scroll on desktop?
- The photo uses a fixed background from tablet width up, which gives a parallax effect. On phones it scrolls normally, since most mobile browsers don't support fixed backgrounds well.