imgheader

Imgheader is a web design term describing a header area that prominently features an image at the top of a page. It is not a formal HTML element; rather, it is a pattern used by developers to create a visually prominent banner or hero section. An imgheader typically comprises an image element or a container with a background image, and may include overlaid text, navigation, or call-to-action elements.

Common implementations include placing an img tag inside a header or hero container, possibly with a figcaption for captioning, or using a div with a background-image and an overlay layer for text. Responsive behavior is achieved with CSS that makes the image scale to viewport width, with techniques such as object-fit: cover or background-size: cover, and with media queries to adjust height and aspect ratio.

For accessibility, the image should have alt text describing its content; if the image is purely decorative, it should be decorative or hidden from assistive technologies.

Performance considerations include optimizing file size, using modern formats (WebP, AVIF), implementing lazy loading, and providing properly sized images for different viewports via srcset and sizes or responsive background techniques. If text overlays are used, ensure sufficient contrast and legibility.

Imgheader is widely used in themes and CMS templates to establish a strong first impression, and the term may be used as a class or component name in CSS/JS frameworks. It overlaps with the concept of a hero image and with cover headers used in blog posts.