◫Aspect RatioCalculator
4 : 1

4:1 Aspect Ratio

The complete 4:1 reference for LinkedIn banners, ultra-wide web headers, and brand cover images. Understand the difference between personal and company page specs, how mobile crops your banner to a thin strip, and how to design for both surfaces at once.

LinkedIn Personal BannerLinkedIn Company PageUltra-wide Headers

4.0000

Decimal ratio

width is exactly four times the height — the widest common banner ratio

25%

CSS padding value

the most compact responsive fallback of any common social ratio

~40%

Mobile visible height

the approximate strip LinkedIn shows on mobile devices

Calculate 4:1 Dimensions

Use exact 4:1 math to size LinkedIn banners, ultra-wide web headers, and brand cover images. The LinkedIn personal banner (1584×396) is exact 4:1. Switch to verify mode to check whether an existing file matches before uploading to avoid unexpected crops. See the broader social media sizing guide.

Enter a width and calculate the exact 4:1 height. The LinkedIn personal banner standard is 1584px wide — enter 1584 to confirm the correct 396px height.

×
Pixel mode uses the native output dimensions directly.

Quick presets

Current Output

1584 × 396 px

The output stays locked to exact 4:1 math, including the exact 25% CSS fallback and the LinkedIn-safe planning zone.

Ratio

4:1

Decimal

4

CSS Padding

25%

Safe Zone

950 × 158 px

Switch to verify mode to check whether a LinkedIn export is exact 4:1 or actually another ultra-wide format.

Formula Reference

Height from widthH = W ÷ 4 (e.g. 1584 ÷ 4 = 396)
Width from heightW = H × 4 (e.g. 396 × 4 = 1584)
CSS fallbackpadding-top: 25%
Decimal4.0 (exact)
Mobile safe zonecenter 60% width × 40% height

LinkedIn personal vs company page — different sizes

Personal Profile Banner: 1584 × 396 px (exact 4:1) ✓

Company Page Banner: 1128 × 191 px (~5.9:1) ✗ not 4:1

These are two different layouts with two different ratios. A 1584×396 image uploaded to a company page will be stretched or cropped. Always check which page type you are designing for before starting. Compare common platform formats.

LinkedIn Banner: What Each Device Actually Shows

LinkedIn renders your banner differently on desktop, mobile, and tablet surfaces. The mobile crop is particularly aggressive — it usually shows only the central horizontal strip of your image. Understanding what each surface displays before you start designing prevents the most common LinkedIn banner mistakes.

Desktop (Web)

1584×396 full image

Full banner visible, but the profile photo overlaps the bottom-left corner.

Mobile App

~1584×158 visible

The app typically collapses the banner into a thin middle strip. Design for the center first.

Tablet

~1584×237 visible

Tablet shows more height than mobile, but it still trims the top and bottom compared with desktop.

Universal safe zoneVisible on desktop and tabletDesktop-only heightProfile photo overlap

Desktop (Web)

Visible area

1584 × 396

Coverage

100%

Bottom-left ~180×180px

LinkedIn App (Mobile)

Visible area

~1584 × 158

Coverage

40% height

Bottom-left ~120×120px

Tablet

Visible area

~1584 × 237

Coverage

60% height

Bottom-left ~150×150px

Universal safe zone

Visible area

~950 × 158

Coverage

60% width × 40% height

Keep clear of the bottom-left overlap

LinkedIn Banner design rules

✓ Keep all critical content (name, tagline, logo, CTA) inside the center 950×158px safe zone.

✓ Never place key text or visuals in the bottom-left corner — the profile photo always overlaps this area.

✓ Use the outer zones only for background color, texture, or decorative elements.

✓ Test at 1584×396 on both desktop and mobile before finalizing. LinkedIn gives you an edit/reposition step after upload on the web, but the mobile app still reads as a much thinner strip.

The mobile and tablet heights above are planning approximations. LinkedIn's personal profile help docs note that the cover photo can look different depending on browser window and screen size.

Preview your LinkedIn banner crop before uploading.

Complete 4:1 Resolution Reference

These sizes cover the full range of 4:1 use cases, from compact email banners to high-resolution print headers. Click any row to push it into the calculator.

LinkedIn Company Page banner uses a different size

Company Page cover: 1128 × 191 px (~5.9:1, not 4:1)

Showcase Page cover: 1128 × 191 px (same as company)

The 4:1 ratio above applies to personal profile banners only. Use the calculator to verify your company page dimensions separately.

Review the wider social media image-size matrix.

Why 4:1 Matters

Your LinkedIn Banner Is a Billboard, Not a Background

Most LinkedIn users treat their banner as an afterthought — a stock photo or a solid color sitting behind the profile photo. That leaves valuable attention on the table. The banner is the largest visual real estate on a professional profile, and it shapes the first impression a recruiter, client, or collaborator gets when they land on the page.

The 4:1 ratio forces a specific kind of design thinking. Unlike a square or portrait frame where you can place the subject almost anywhere, a 4:1 strip demands a horizontal narrative. The strongest banners usually do one thing clearly: a centered brand statement, a wide-format image with a calm horizon, or a typographic line that reads like a headline.

What fails in 4:1 is clutter: multiple focal points, portrait photos that collapse into letterboxed slivers, and text parked near the edges where mobile crops will cut it off. Think of the banner as a billboard. Billboards work because they communicate one thing clearly at highway speed. Your LinkedIn banner has to do the same at scroll speed.

Effective

Centered brand message

A single centered message survives the mobile strip and still reads cleanly on desktop.

Effective

Wide landscape photo with centered text

A wide image with a clear horizon line keeps the frame calm and gives the centered text a stable anchor.

Avoid

Portrait photo letterboxed

Tall source images collapse into a lonely central tower and waste most of the banner width.

Avoid

Text near the edges

Anything parked near the edges is the first thing the mobile strip and avatar overlap will punish.

4:1 in Web Design: When Ultra-Wide Headers Work

Beyond LinkedIn, 4:1 appears in web design as an ultra-wide hero banner ratio for full-width page headers, especially on landing pages and marketing surfaces that want a strong visual opening without committing to a full-screen takeover.

The CSS is easy — `aspect-ratio: 4 / 1` or `padding-top: 25%` — but the image choice is not. A 4:1 container paired with `background-size: cover` will crop portrait and square imagery aggressively. Use a genuinely wide source photo, ideally 4:1 or at least 2:1, and keep the message centered so the same banner survives narrower screens.

When you need the implementation details, the CSS aspect-ratio generator is the fastest way to test the exact wrapper code before you wire it into a component.

1920×1080 viewport

4:1 Header (1920×480)

~44% of viewport height

Page content

~56% still visible above the fold

At 1920px wide, a full-bleed 4:1 header becomes 480px tall — leaving roughly 600px of the first content section visible on a 1080p screen.

That makes 4:1 feel immersive without forcing a complete full-screen takeover. It is still wide enough to signal brand, product, or event context immediately, but short enough to let the page continue below the fold.

4:1 in Context: The Widest End of the Banner Spectrum

4:1 is the widest ratio with a clean integer relationship that still appears regularly in digital design. Beyond 4:1, banner formats become so extreme that they mostly belong to panoramic photography, environmental signage, or outdoor advertising rather than everyday web and social use.

16:9

1.778

Video, YouTube

2:1

2.000

Panoramic, web hero

3:1

3.000

Twitter Header

4:1

4.000

LinkedIn Banner

5:1

5.000

Extreme banner

At 4:1, the width is four times the height. Every additional unit of width beyond this point produces diminishing visual returns because the eye struggles to scan the full strip in a single glance.

CSS for 4:1 Banner Containers

4:1 gives the cleanest CSS of any common banner ratio — padding-top: 25% is an exact quarter, and aspect-ratio: 4/1 needs no approximation. Use the safe zone pattern below to keep content centered and protected from edge crops.

Modern CSS

css

.banner-4-1 {
  aspect-ratio: 4 / 1;
}

Padding-hack (legacy browser support)

css

.banner-4-1-wrapper {
  position: relative;
  padding-top: 25%; /* exact: (1/4) × 100 */
}
.banner-4-1-wrapper > * {
  position: absolute;
  inset: 0;
}

Tailwind CSS

html

<div class="aspect-[4/1]">...</div>

Bootstrap 5 (custom ratio)

html

<div class="ratio" style="--bs-aspect-ratio: 25%;">...</div>

React inline style

tsx

<div style={{ aspectRatio: '4 / 1' }}>...</div>

Safe zone pattern for LinkedIn banner

css

.banner-4-1 {
  aspect-ratio: 4 / 1;
  position: relative;
  overflow: hidden;
}

.banner-safe-zone {
  /* Center 60% width × 40% height — safe on all devices */
  position: absolute;
  left: 20%;
  right: 20%;
  top: 30%;
  bottom: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

Choosing a background image for a 4:1 container

background-size: cover will crop any image taller than 4:1.

Safe source ratios for 4:1 backgrounds:

✓ 4:1 or wider (panoramic photos, wide landscapes)

✓ 3:1 (slight top/bottom crop, usually acceptable)

△ 2:1 (moderate crop — test before using)

✗ 16:9 (heavy crop — loses roughly half the source height)

✗ 1:1 or portrait (extreme crop — avoid)

For best results, use a purpose-made 1584×396 image rather than repurposing a photo from another format.

Related Aspect Ratios

4:1 is the widest common social media banner ratio. These nearby ratios cover the full range from standard widescreen to ultra-wide banner formats.

3:1

3:1

Slightly narrower — Twitter/X header standard

2:1

2:1

Much narrower — panoramic photos and web heroes

16:9

16:9

Standard widescreen — video and YouTube

1:1

1:1

Square — LinkedIn post images and profile photos