Twitch Overlay Size Not Matching Your Game: How to Fix Borders and Black Bars

Your overlay doesn't fit your game because the overlay canvas, the game capture, and the output resolution are three different sizes being forced together. The fix is almost always the same: build the overlay at exactly 1920×1080, capture the game at its native aspect ratio, and let OBS scale the game to fill the canvas instead of stretching the overlay to match the game.

Here's how to diagnose which of the three is wrong, and fix it in about ten minutes.

Why overlays and games drift out of alignment

An overlay is a flat image or browser source with fixed pixel dimensions. A game is a live feed that can be any resolution and any aspect ratio. When those don't share the same shape, something has to give — and the result is one of three symptoms:

• Black bars on the top/bottom or left/right, with your overlay frame floating in empty space.
• A border that cuts into gameplay, covering a health bar, minimap, or ability icons.
• A stretched or squashed border where the corners look thin and the sides look thick.

Each points to a different root cause. Check them in this order.

Step 1: Confirm your OBS canvas is 1920×1080

Open Settings → Video in OBS. "Base (Canvas) Resolution" should read 1920×1080, and "Output (Scaled) Resolution" should also be 1920×1080 unless you have a specific reason to downscale.

If the canvas is set to 2560×1440 or 3840×2160, every 1920×1080 overlay you download will sit in the top-left corner at 75% or 50% of the frame — that's the "my overlay is tiny and off-center" problem, not a broken overlay file.

Set the canvas to 1920×1080 and re-add the overlay. Most overlays are authored at that size because it's the most common Twitch source resolution. If you stream at 936p or 720p, still build at 1080p — OBS downscales the whole composition cleanly, and your overlay stays crisp.

Step 2: Match the game's aspect ratio before you touch the overlay

This is where most mismatches actually come from. A 16:9 game (Valorant, Fortnite, League of Legends) fills a 1920×1080 canvas perfectly. A 4:3 game, a 21:9 ultrawide game, or a mobile/card game in portrait will not.

In OBS, right-click the game capture source and check Transform → Fit to Screen versus Stretch to Screen:

• Fit to Screen preserves the game's shape and adds black bars — correct for gameplay, but your overlay's border will now sit over empty space.
• Stretch to Screen fills the canvas but distorts the game — never do this on stream.

If you're playing a non-16:9 game, don't stretch the overlay to chase the black bars. Instead, accept the pillarbox and design the overlay so the bars are part of the layout: put your camera, chat, and alerts in the side columns. Viewers read that as intentional framing, not as a mistake.

Step 3: Fix overlay scaling inside OBS, not in Photoshop

When the overlay looks "almost right but slightly off," the source has usually been scaled by a fraction. Select the overlay source, open Transform (Ctrl+T or right-click → Transform → Edit Transform), and check the numbers:

• Position X: 0, Position Y: 0
• Size: 1920×1080
• Bounds Type: None (or "Stretch to bounds" with matching bounds)
• Rotation: 0

One decimal place of drift — 1918.6 wide instead of 1920 — is enough to make a border look uneven by a few pixels on each side. Type the exact values in rather than dragging.

If you have a webcam frame that's misaligned with the rest of the layout, the sizing rules are specific enough to be worth a separate read: Twitch Webcam Overlay Frame: How to Size, Place, and Style Your Camera Border.

Step 4: Match the alert and widget source sizes

Browser sources from alert and widget tools often default to 800×600 or 1280×720. Dropped into a 1080p canvas, they render blurry or get cropped.

Open the source's properties and set width and height to 1920×1080 (or the exact size of the region you're using), then re-check the transform. Text in alerts should be sharp at 100% scale — if it's fuzzy, the source is being upscaled and needs its native resolution raised.

Step 5: Check what your viewer actually receives

A clean OBS preview doesn't guarantee a clean stream. Open your own channel on a phone and a desktop browser, and look for:

• Black bars that appear on Twitch but not in OBS (usually a canvas/output mismatch).
• Overlay edges that shimmer or blur (usually a non-integer scale like 66.7%).
• Elements clipped at the frame edge (usually a safe-zone problem, not a size problem).

Twitch's player letterboxes to the source aspect ratio, so a 1920×1080 stream shows correctly on almost everything. If you see bars on desktop but not mobile, suspect the canvas setting first.

The quick reference: correct sizes for a 1080p stream

Element	Size to build at
OBS canvas	1920×1080
OBS output	1920×1080 (or 1664×936 / 1280×720 downscale)
Full-frame overlay	1920×1080, positioned at 0,0
Webcam frame	Sized to the camera source, not the canvas
Alert browser source	1920×1080, then position the alert region
Panels (below stream)	320px wide, PNG

For the full breakdown of which source resolutions survive Twitch's transcoding without going soft, see Twitch Stream Overlay Resolution: The Exact Sizes That Keep Your Stream Sharp.

When the fit is right but the layout still looks off

If your overlay now lines up pixel-perfect and the channel still reads as amateur, the problem has moved from geometry to composition. The usual culprits:

• Elements crowding the game. The border fits, but it's eating 15% of the playable area. See Twitch Overlay Clutter: How Many On-Screen Elements Is Too Many?.
• Text that vanishes over bright gameplay. A correctly sized overlay with low contrast is still unreadable.
• Inconsistent styling across scenes. A border that matches in Scene 1 and clashes in Scene 3 makes the channel feel patched together.

A 3-minute check before every stream

1. Load each scene and confirm the game capture is Fit to Screen, not stretched.
2. Confirm the overlay source reads exactly 1920×1080 at 0,0 in Edit Transform.
3. Look at the corners of your frame — all four should be the same thickness.
4. Glance at the HUD: no health bar, minimap, or ammo counter should be under a border or alert.
5. Open your channel on your phone and confirm no bars appear that weren't in the preview.

Do that and the black bars and crooked borders stop happening, permanently — because you've fixed the cause instead of nudging the overlay around each session.

If you'd rather have someone else find the mismatches across all your scenes at once — canvas settings, overlay scaling, safe zones, plus branding and discoverability — Get your free Streamlint audit and get a specific list of what to fix first.