How to Format Banners for Your Website on Internal Pages

Last updated: November 2025

Banners are a great way to add visual flair to your internal pages! This guide explains how to design a banner that looks great on both desktop and mobile layouts in the Classic builder, while maintaining accessibility and responsiveness.

Standard Banner Dimensions

For the standard banner, we recommend a size of 1520 pixels wide by 291 pixels tall.

⚠️ Your site’s banner height may have been customized during onboarding or design using CSS and may need a different aspect ratio or buffer zone.

Safe Design Zones

To make sure your logo, text, or key visuals don’t get cut off on mobile devices or smaller screens, follow these spacing guidelines:

Area	Pixels	Purpose
Top buffer	~50px	Prevents clipping on different screen heights
Bottom buffer	~50px	Keeps visuals centered vertically
Left & right “mobile buffer zones”	~500px each side	Protects your content from being cropped on mobile screens
Main content zone (safe area)	500px × 191px (centered)	This area always remains visible on all devices
Gradient Zone (for text captions)	CSS-defined height	Ensures readable contrast behind banner text; if not using captions, we may have adjusted this for you in CSS

🎨 About the Gradient Zone

Due to color contrast accessibility requirements (WCAG 2.1 AA), banners by default include a gradient overlay where the banner text or caption appears.
This ensures the caption text remains readable across different images and screen sizes.

If you don’t plan to use banner captions, our team can (or may have already) removed or lightened this gradient for you using CSS.
If you don’t have a gradient, be sure to either:
- Avoid using banner captions, or
- Use banner images that include built-in gradients or darker tones in that area to maintain text contrast and accessibility compliance.

Design Layout Overview

(Example layout showing buffer zones and the safe content area)

In the image above:

The black center box represents the safe content zone — keep your logo, text, and essential elements inside this area.
The light pink regions on the sides and top/bottom are buffer zones — ideal for background colors, gradients, or decorative imagery that can safely crop or fade on smaller screens.

Designer & Accessibility Tips

Maintain high contrast between text and background to meet WCAG 2.1 AA standards.
Avoid small or thin text near edges — these may disappear on mobile layouts.
Use vector or high-resolution images to prevent blurriness.
Save images as .jpg or .png

Need Help?

If your banner looks cropped after uploading, or if you’re unsure what height to use, contact Streamline Support.

We can confirm your current banner height, gradient settings, and help you make adjustments for the best visual results.