Image Banner

A full-width image display module that renders a single image at one of three configurable aspect ratios. The image spans the entire page width, making it ideal for decorative dividers, hero-style visuals, or full-bleed photography between content sections. The image field is the only required field -- just upload and choose a ratio.

Adding in Strapi

1. Go to Content Manager > Pages > select your page
2. In the Design dynamic zone, click "Add component"
3. Select "Dynamic" > "Image Banner"
4. Upload an image and choose the desired aspect ratio
5. Save and publish

Fields Reference

Variants

Default

Displays the image at 16:9 widescreen ratio. This is the most common aspect ratio and works well with standard landscape photography.

WideScreen

Also uses the 16:9 ratio, demonstrating the default behaviour with a different image.

UltraWide

Uses the 21:9 ultra-wide ratio, creating a cinematic letterbox effect. Best suited for panoramic or landscape imagery.

NullableFields

Demonstrates the component's fallback behaviour when optional configuration is omitted.

Tips

• For RATIO_16_9, upload images at least 1920x1080 pixels for sharp rendering on desktop displays.
• For RATIO_21_9, use images at least 2560x1080 pixels to avoid pixelation on wide screens.
• For RATIO_3_1, use images at least 2400x800 pixels for best quality at the panoramic aspect ratio.
• The image renders full-width with object-fit: cover, so the centre of the image is always visible -- position key subjects in the centre of the frame.
• Use image banners between text-heavy sections to create visual breathing room and break up long pages.
• Compress images before uploading to keep page load times fast -- aim for under 500 KB per banner image.