Hero image
A hero image is a large, prominent visual placed near the top of a webpage or section to establish context and attract attention.
Web Design Playground, Second Edition
A hero background image is a prominent background image occupying most or all of the initial viewport behind introductory page content.
- How it is used
- Use hero images to make a landing-page header immediately attention-grabbing while supporting product messaging and calls to action.
- How deep it goes
- Explains the container, viewport dimensions, background positioning, and cover sizing through complete CSS examples.
- Examples
- Demonstrates a Toronto welcome hero and a fictitious product landing-page header with a fixed background image.
- What you can do after
- Build it from scratch with a full-window div, centered background image, and background-size: cover.
Read how Web Design Playground, Second Edition explains hero image →
Build a Website with ChatGPT
A hero image is a prominent photo or illustration displayed across the width and usually the height of a browser window when a page is first opened.
- How it is used
- Creates an attention-grabbing header for interest-site home pages and subtopic pages.
- How deep it goes
- Explains image selection, CSS background placement, prompting, and overlay darkness without advanced CSS internals.
- Examples
- Uses a bread-themed home page with hero.jpg, navigation links, and adjustable rgba gradient overlays.
- What you can do after
- Operate/configure it by adding a header background image and adjusting its overlay for readable text.
WordPress Power Toolkit: Harness AI to build next-level websites
A hero image is a prominent introductory image displayed near the top of a website or page.
- How it is used
- Introduces a website to visitors and establishes a visual focal point that guides their attention.
- How deep it goes
- Defines the role, dimensions, aspect ratio, file size, and resolution, then connects placement to visual balance and cohesion.
- Examples
- Uses a 1,280 × 720 JPG target, 72 PPI guidance, and oversized smartphone photographs to demonstrate web-image preparation.
- What you can do after
- Apply it by preparing a correctly sized, lightweight image that represents the site and supports a deliberate visual path.
Read how WordPress Power Toolkit: Harness AI to build next-level websites explains hero image →
Related concepts
- rgba()configured by · The CSS rgba() function specifies a color using red, green, and blue components together with an alpha value controlling opacity.
- focal pointkind of · A focal point is a distinguished point or location that serves as a central reference for attention, measurement, or analysis.
- header elementpart of · The HTML header element represents introductory content or navigational aids for a document or section.
- viewportuses · A viewport is the visible region through which a browser or graphical interface displays a document or content.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.