Image Background Hero

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

44 sectionsView all →
1–6 of 44
Image Background Hero template preview
Hero

Image Background Hero

Responsive · Animated
Personal Portfolio Hero template preview
Hero

Personal Portfolio Hero

Responsive · Animated
SaaS Split Hero template preview
Hero

SaaS Split Hero

Responsive · Animated
Centred Gradient Hero template preview
Hero

Centred Gradient Hero

Responsive · Animated
App Product Hero template preview
Hero

App Product Hero

Responsive · Animated
Pricing List Rows template preview
Pricing

Pricing List Rows

Responsive · Animated

Image Background Hero — Free Website Section Template

Hero · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryHero
Tagsherobackground imagephotofull widthtravelagencystats
Updated October 20, 2026

What's included

Features

Full-width background photo with a two-layer readability overlay
Large headline with *asterisk* highlights in the brand colour
Primary and frosted-glass secondary buttons
Optional row of three stats with labels
Upload photos up to 2400 px wide, resized in your browser
Overlay colour follows your theme background
Stacked, evenly shaded layout on phones via container queries
GSAP entrance animation for the text and stats
Elegant serif heading by default; any Google or uploaded font
Export HTML, a ZIP with your photo, React or Vue, or fork to My Code

About this section

Image Background Hero — Free Full-Width Photo Hero Section Template

Image Background Hero is a free, full-width hero section with your photo as the background. A dark gradient overlay keeps the text readable on any image, and a large headline, supporting text and two buttons sit on the left, with an optional row of three stats along the bottom. It's the classic hero for travel, hospitality, real estate, events, agencies and local businesses, where a great photo does most of the selling.

Readable on any photo

Text over images is often hard to read. This template layers two gradients over the photo: a horizontal one that is darkest behind the text and fades toward the right, and a vertical one that grounds the stats row. On phones the overlay becomes even, so the text stays legible when the layout stacks. The overlay uses your background colour, so it always matches your theme.

Your photo, kept private

Upload a wide, high-resolution photo straight from your computer. It's resized in your browser (up to 2400 px wide), saved locally in IndexedDB and never uploaded to a server. When you export a ZIP, the photo is placed in an images folder next to the page; the single-file HTML export embeds it.

Stats that build trust

The optional stats row shows three numbers with labels, such as routes, ratings and group size, which add credibility without another section. Turn it off for a cleaner hero. Like every section, it uses the shared theme (colours, fonts, radius, width), animates in with GSAP on scroll and exports as HTML, a ZIP, React or Vue.

Image Background Hero: A full-width hero with your photo as the background, a dark gradient overlay that keeps text readable, a small label, a large white headline, supporting text, two buttons and an optional row of three stats along the bottom.

Why use it

Why Use the Image Background Hero

🖼
Let the photo sell
For places, events and experiences, a strong image communicates more than any headline, and this layout gives it the whole screen.
Aa
Text stays readable
A tuned gradient overlay keeps white text legible on bright and busy photos alike, on every screen size.
📊
Proof built in
Three stats along the bottom add credibility right in the hero, without making visitors scroll for it.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the background photo, headline & text, buttons and stats row in the panel. Switch the stats row on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🏔
Travel and tour operators
Show your most beautiful destination photo with a headline about the experience, buttons for trips and a film, and stats for routes, reviews and group size.
🏨
Hotels, restaurants and venues
Use a photo of the space or the food, a "Book a table" or "Check availability" button and stats such as rating, rooms or years open.
🏡
Real estate and architecture
Feature a property or project photo with a headline about the lifestyle, a button to view listings and stats for homes sold or projects completed.
🎟
Events and conferences
Use a crowd or venue photo, the event date in the eyebrow, a "Get tickets" button and stats for speakers, attendees and days.

Got questions?

Frequently Asked Questions

A landscape photo at least 1920 × 1080 px works best. The editor resizes uploads to a maximum of 2400 px wide in your browser to keep the page fast. Choose a photo with calmer areas on the left, where the text sits.

The overlay already darkens the area behind the text. For very bright photos, set a darker background colour in the Colours section, since the overlay is built from the background colour.

Yes. Switch off "Stats row" in the panel. The hero keeps its height and the content stays vertically balanced.

No. Your photo is stored in your browser’s IndexedDB and only leaves your device when you export or back up your designs.

Yes. Copy the React or Vue component from the Export menu. Uploaded images point to an images folder, so download the ZIP to get the files, or use a hosted image URL.

It saves an editable copy of your Image Background Hero in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.