Banner Images: Sizing and Display Settings
Your banner image is the most dynamic element in your reel. It resizes based on the viewer's browser width, which means your banner image will look different on a wide desktop monitor than on a phone. This guide covers how to size your banner image file and use the display settings to make your banner look great everywhere.
You can upload and adjust your banner image from the Banner block in the Reel Builder.
Jump to: File size recommendations · Display settings · Tips for common scenarios · Common questions
Banner image file size recommendations
Before uploading, make sure your banner image file is sized appropriately:
- Recommended width: At least 2400px (for full-width display on large desktop monitors)
- Minimum width: 1100px (otherwise, your banner may appear narrower than the rest of your reel content on wider screens)
Tip: If your banner image is narrower than the reel content area, it won't stretch edge-to-edge on larger screens. When in doubt, go wider.
Banner image display settings
Once you've uploaded your banner image, you can fine-tune how it displays using these controls.
Image Fit Mode
Controls whether your banner image is cropped or shown in full.
- Contain (default): The entire banner image remains visible, but you may see empty space on the sides. Best for logos or graphics where nothing should be cropped.
- Cover (crop to fill): The banner image fills the entire banner area, cropping as needed to fit. Best for photos and artistic images where some cropping is acceptable.
Quick rule: If cropping would be a problem, use Contain. If you can focus on a subject that works at different screen sizes, use Cover.
Image Position
When using Cover mode for your banner image, Image Position determines which part of your image stays anchored when cropping occurs. For example, if your headshot is on the right side of the image, set the position to "Right" or "Bottom Right" so your face stays visible when the banner crops on narrower screens.
Min Height
Sets a floor for how short your banner image can become. Without this, banners can get uncomfortably thin on mobile devices. A Min Height of at least 200–250px generally keeps your banner image looking good on small screens.
Max Height
Caps how tall your banner image can grow on large screens. Useful if you want to prevent your banner from dominating the top of the reel on wide monitors.
Tips for common scenarios
Banner image with portrait photos or headshots: Use Cover mode and set Image Position to match where your subject appears in the frame. This keeps faces visible even when the banner image is cropped on mobile.
Banner image with text overlays: Set Image Position to match where your text appears in the image. For example, if your text is on the left side, set Image Position to "Left" so it doesn't get cropped on narrower screens.
Banner image with logos or graphics where cropping isn't acceptable: Use Contain mode to ensure the full banner image is always visible. Alternatively, if you prefer Cover mode, consider using patterns, textures, or images with extra "bleed" space around the edges so cropping doesn't cut into anything important.
Preview and test
After adjusting your banner image settings, preview your draft and resize your browser window from wide to narrow. Shrink it down to phone width to make sure nothing important gets cropped and your banner still has visual presence.
Keep in mind that it may not be possible for your banner image to look perfect on both super-wide desktop screens and tiny mobile screens. Experiment with different settings to find what looks best to you. If you find cropping frustrating, consider using graphic patterns, abstract textures, or photos without faces, text, or subjects that can't be cropped.
Common questions
What size should my banner image be?
Your banner image should be at least 2400px wide for best results on large desktop monitors. The minimum recommended width is 1100px. Height is flexible since you control it with the Min Height and Max Height settings.
Why does my banner image look different on mobile?
Banner images resize based on the viewer's browser width. On mobile devices, the banner becomes narrower, which can cause cropping (in Cover mode) or scaling (in Contain mode). Use the Min Height setting to prevent your banner from becoming too thin on mobile, and set Image Position to control which part stays visible when cropping occurs.
Why is my banner image cropped?
If your banner image is cropped, you're using Cover mode. Cover fills the entire banner area, cropping edges as needed. To see your full image without cropping, switch to Contain mode. If you want to keep Cover mode but control what gets cropped, adjust the Image Position setting.
Why doesn't my banner image stretch to fill the width?
If your banner image doesn't reach the edges of your reel, your image file may be too narrow. Upload an image at least 1100px wide (2400px recommended) so it can stretch edge-to-edge on wider screens.
How do I keep my headshot visible when the banner crops?
Use Cover mode and set Image Position to match where your subject appears. For example, if your headshot is on the right side of the image, set Image Position to "Right" or "Bottom Right." This anchors that area so it stays visible on narrower screens.
What's the difference between Contain and Cover?
Contain shows your entire banner image without cropping, but may leave empty space on the sides. Cover fills the entire banner area and crops edges as needed to fit. Use Contain for logos and graphics where every pixel matters. Use Cover for photos where you can use Image Position to focus on a subject that works on both wide desktop screens and narrow mobile screens.