Hero Header Design: Website Hero Banner Examples and Sizes
The hero header is the first thing a visitor sees: the big image, headline and button at the top of a homepage. Below are 36 hero header examples grouped by website type, plus the sizes and dimensions to use for hero images and moving video backgrounds, and tips for designing a hero banner that gets clicked.
Every hero header on this page:
- A desktop website hero designed at 1920 px wide, in RGB
- An editable design file (Photoshop or Illustrator, see each item), not coded HTML
- Preview photos are not included in the download.
Contents
- What is a hero header?
- What goes in a hero section
- Hero section sizes and dimensions
- Product hero banners for online stores
- Food and restaurant hero headers
- Fashion and beauty hero banners
- Full-screen photo and video-style hero headers
- Interior, architecture and real estate heroes
- Personal, music and nonprofit heroes
- Business, startup and illustrated hero sections
- Hero banner design tips
- FAQ
What is a hero header?
A hero header (also called a hero section, hero banner or hero image) is the large banner at the very top of a web page, above the fold. It usually combines a full-width image or video, a short headline, one line of supporting text and a call-to-action button.
Its job is to tell visitors in a few seconds what the site is and what to do next. The names overlap: hero image is the picture itself, hero banner is the image with text on it, and hero section or hero header is the whole first block, including the navigation bar.
What goes in a hero section
- Navigation bar: logo on the left, a few menu links and, for shops, search and cart icons.
- Headline: five to eight words that say what you offer. This is the largest text on the page.
- Supporting line: one or two sentences of detail, never a paragraph.
- Call to action: one main button (Shop now, Book now, Get started). Add a second, quieter link only if needed.
- Visual: a product cut-out, a full-bleed photo, a short video loop or an illustration.
- Optional extras: a price and Add to Cart for single-product shops, a search or booking bar, slider arrows, social links.
Hero section sizes and dimensions
There is no single official size, because the hero stretches to fit each screen. These are common practice values that work on most sites:
| Item | Common size | Notes |
|---|---|---|
| Desktop hero image | 1920 x 1080 px (16:9) | Covers full HD screens. Every Photoshop hero on this page is designed at this size. |
| Laptop viewports | 1440 x 900 and 1366 x 768 px | Keep the headline and button inside the central 1200 to 1400 px so they are never cropped. |
| Full-screen hero height | 100vh | Fills the first screen. Best for big photos and video backgrounds. |
| Partial hero height | 60 to 80vh | Shows the top of the next section, which tells visitors to scroll. Common for shops and SaaS. |
| Mobile width | 375 to 430 px wide (portrait) | Use a separate portrait crop or let the image focus on the subject; export at 2x for sharp screens. |
| Image file | WebP or JPG, ideally under 200 to 300 KB | Compress the hero image; it is usually the largest file on the page. |
| Background video | 1920 x 1080 px, 10 to 30 s loop | MP4 (H.264) plus WebM, under 5 to 10 MB, muted, with a still poster image as a fallback. |
For a moving background header, keep the clip short, slow and low in contrast so the headline stays readable, add a dark overlay of about 30 to 50 percent if the text is white, and show the poster image on mobile where autoplay video may be blocked or costly.
Product hero banners for online stores
An e-commerce hero sells one product at a time: a cut-out product shot, a short headline, the price and a buy button, all on the first screen.
1. Deluxe Furniture
“Deluxe” in large white type over a grey concrete living room, with a product card on the right showing a sofa chair, a $76.5 price and an orange Order Now button. A slider-style hero for furniture and home decor stores.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
2. Facial Wash Product
The product tube sits on white next to a green panel with the headline “Facial Wash With Aloevera”, a $7.9 price, a quantity picker and Add to Cart. The buy button lives right in the hero, ideal for a single-product skincare shop.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
3. Smartwatch Store
A navy background with thin orbit lines, the headline “Optimize Your Activities”, a watch video link and the smartwatch on a grey half circle with color dots. Suits gadget and tech product launches.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
4. Electrical Guitar Store
A white and red split with a black electric guitar, a serif headline and a red search bar for guitar type. The hero doubles as a product search for music shops.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
5. Modern Boost Shoes
A neon sneaker on pink next to a purple panel with “Boost Your Spirit”, a $120 price, size, quantity and color pickers and an Add to Chart button. A whole product page squeezed into the first screen.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
6. Bass Booster Headphone
White and red headphones on a solid red background with a bold “Bass Booster” headline. A simple one-product, one-color hero for audio and accessory stores.
1920 x 1080 px (16:9) · RGB · Google Fonts
7. Fruits Soda Product
A soda can splashing on yellow, a diagonal green panel and the headline “Fruits Mix Soda” with a yellow Discovery button. An energetic diagonal split for drink and snack brands.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
Food and restaurant hero headers
Food heroes work when the dish is the hero: a big top-down plate, warm colors and an Order or Find button close to it.
8. Donuts Pleasure
Pink and chocolate donuts flying over giant red “DONUTS” letters, with a yellow menu column and a red text panel. Playful and loud for bakeries and dessert shops.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
9. Food Restaurant
Lime green and yellow blocks with a shrimp rice bowl, the headline “Get Your Food Now”, a Find Now button and a menu bar for main course, appetizer and dessert. Made for food delivery and ordering sites.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
10. Original Pizza
An orange and dark green split with a pizza, a $10.5 price badge, S/M/L size buttons and an Order Now button. A menu slider inside the hero for pizzerias.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
11. Secret Recipe Restaurant
A spaghetti plate on an orange shape over a dark kitchen photo, with the headline “Secret Recipe” and an orange Discover button. Warm and appetizing for restaurant homepages.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
Fashion and beauty hero banners
Fashion heroes borrow from magazine covers: large model photos, serif or extra-bold headlines, and a lookbook or collection link instead of a hard sell.
12. Women Blogger Web
“Be a girl with a mind, a woman with attitude” in a serif headline on white, with a woman in a brown coat inside a yellow blob shape. A soft, personal hero for fashion and lifestyle blogs.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
13. Fashion Casual Gallery
Vertical “Editorial Casual Work” type, two models, teal circles and a small gallery and Summer Collection block. Mixes a lookbook and a hero in one screen.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
14. Fashion Perspective
A navy and white editorial layout with a gold serif headline, “The Other Side Perspective”, three portraits and a Discover button. A magazine-style hero for fashion brands.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
15. Men’s Fashion Soul
A man in a floral jacket holding flowers, the red headline “Expression Your Soul” and a second photo on the right. Bold color photography for menswear.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
16. Eternal Ethnic Fashion
A black and white runway photo, a red “Compatibility With Daily Fashion” headline, a video thumbnail and a red Discover button. Editorial and dramatic.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
17. Fashion Stage
A vertical red “Fashion Guide” title, a model in a patterned outfit, the serif headline “Obsessed With Fashion Trend” and a video thumbnail on a calm light background.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
18. Stylish Treatment
A teal background with a red circle behind a model in striped trousers, the headline “More Stylish Than Before” and a Watch Video link. Bright and fun for beauty and fashion apps.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
19. Fashionable Style Store
A navy and mustard layout with a woman holding white flowers, a “Fashionable” headline, a Discovery button and a small portrait. The shop menu (men, women, kids) sits in the top bar.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
Full-screen photo and video-style hero headers
These heroes fill the whole first screen with one photo, the layout that most often becomes a moving background. Many include a Watch Video link or a video thumbnail, so you can swap the photo for a short loop (see the video specs above).
20. Adventure Travel
A mountain lake photo with “Adventure Await” centered, a Watch Video link and a row of small destination cards at the bottom. The classic full-bleed travel hero.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
21. Travel Agency
An aerial photo of turquoise water and boats, the headline “Get Gone on Your Travel”, a video thumbnail and a booking bar for guests and dates. Shows how to fit a search form into a hero.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
22. Natural Forest Conservation
A moody lake and mountain photo with “Gone Wild.” in large white type and Donate and Conservation links on the right. For nonprofits and outdoor brands.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
23. Extreme Sport Winter
A skier on a bright snowy slope with a red “Extreme Sport” headline, Prev and Next arrows and a Watch Video link. Built for a slider or a short action video.
1920 x 1080 px (16:9) · RGB · Google Fonts
24. Film Studio Action
A dark photo of leaves and a gas mask, the headline “End of War” and a video thumbnail with Prev and Next buttons. Cinematic, for films, trailers and game studios.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
25. Road Bike Store
A black hero with a road bike in shadow, the headline “Road Bike”, a Check Now button and a grey bar with gallery, event and news links plus a video card.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
Interior, architecture and real estate heroes
Calm, airy photos and lots of white space. Let the room or the building speak, and keep the text to one headline and one link.
26. Futuristic Architecture
The serif headline “Architecture Aims at Eternity” on white beside a curved white building against a blue sky, with an orange project card. For architects and design studios.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
27. Interior Minimalism Design
A taupe panel with “Minimalism Looks Clean”, a white vase photo and three small article cards along the bottom. Good for interior designers who also run a blog.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
28. New Living
“Step Forward For New Living” in bold black type on white, beside a bright living room with a grey sofa and shelves and slide number 01. Clean and airy for furniture and interior brands.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
29. Living Residence
A villa with a swimming pool and a white search card reading “Find The New Living Experience By Residence” with a Get Started button. A real estate hero with the search box up front.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
Personal, music and nonprofit heroes
For blogs, artists and causes, the hero introduces a person or a mission rather than a product.
30. Personal Website
A woman holding an open book beside a yellow panel that says “Hello I’m Nindy Angela”, with a small side menu and numbered pagination. A friendly hero for a personal site or portfolio.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
31. Instrumental Music Album
A pale blue grid with the serif headline “Instrumental Modern”, a singer photo, a new-single card and a video tile. For musicians and album launches.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
32. Social Literacy
A beige and white split with a woman holding a tablet, the headline “Read All About It To Understand” and Our Work, Donate and Conservation links. A clear hero for charities and nonprofits.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
Business, startup and illustrated hero sections
Service and software heroes lean on a clear promise and a single button. Photos of people build trust; flat illustrations explain an abstract product.
33. Business Consultant
An office photo of two people at a laptop inside a blue circle, the headline “Simpler & More Productive”, a play button and a More Info button. For consultants and agencies.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
34. Startup Business
A pink wave shape, a laptop photo in a circle and the headline “Start From Here” with a Book Now button. Simple and upbeat for startups.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
35. Payment Online Business
A flat illustration of a man with a phone payment screen and the headline “Easy Solution For Your Payment Online Business” with two buttons. For fintech and payment apps.
1920 x 1080 px (16:9) · RGB · Adobe Photoshop
36. Creative Space Illustration
A blue hero with the headline “Make Your Own Creative Space” and a vector illustration of a person at a laptop surrounded by floating media windows. Colors and shapes are fully editable.
1920 px wide, flexible height · vector · Adobe Illustrator
Hero banner design tips
- One message, one button. The best hero banner ideas above all say one thing and ask for one action.
- Make the headline readable on every crop. Place text over a calm part of the photo or on a solid panel, like the split layouts in this list.
- Show the product. For a shop, a cut-out product photo with a price beats an abstract mood image.
- Use a slider sparingly. Most visitors only see the first slide, so put the most important offer there.
- Pick fonts that work at large sizes. A strong display or serif headline sets the tone in one glance.
- Check the fold on mobile. On a phone the headline and the button should both be visible without scrolling.
- Keep it light. Compress images and videos; a slow hero hurts both visitors and search rankings.
For headline type see our best fonts for websites, for full pages built around a hero see our landing page inspiration, and for smaller ad banners see our banner ad inspiration.
Frequently asked questions
What is a hero header?
It is the large banner at the top of a web page, usually a full-width image or video with a headline and a call-to-action button. It is also called a hero section, hero banner or hero image.
What size should a hero image be?
1920 x 1080 px (16:9) is the most common choice for desktop, compressed to a few hundred KB. Keep important content in the center so it survives cropping on laptops (1440 or 1366 px wide) and phones (375 to 430 px wide).
What are the best dimensions for a moving background in a hero section?
Common practice is a 1920 x 1080 px video, 10 to 30 seconds long, looped and muted, exported as MP4 and WebM and kept under 5 to 10 MB, with a still poster image for mobile and slow connections.
How tall should a hero section be?
Use 100vh for a full-screen hero with a big photo or video, or 60 to 80vh when you want part of the next section to show so visitors know to scroll.
What is the difference between a hero header and a hero banner?
In practice they mean the same thing. Some designers use hero banner for the image with text on it and hero header or hero section for the whole top block, including the navigation.
Can I edit these hero header templates?
Yes. Most are Adobe Photoshop files at 1920 x 1080 px and the illustrated ones are Adobe Illustrator files; the spec line under each item says which. Preview photos are not included, so use your own or licensed stock images.
Need more website headers?
Browse the full collection of website hero header templates.