OBS and Streamlabs setup
How to Add an FC 27 Overlay to OBS or Streamlabs
A clean overlay sits above gameplay, matches the canvas exactly, and leaves the action readable. This walkthrough covers static PNG and animated WEBM overlays without assuming a specific pack.
Updated 2026-08-05 · 6 min read
The Quick Path
- 1
Prepare the canvas
Set the base canvas to 1920×1080 and extract the downloaded PNG or WEBM file before opening your scene.
- 2
Add the overlay
Create an Image source for PNG or a Media Source for WEBM, then place it above the gameplay capture in the source list.
- 3
Fit and test
Fit the source to the canvas, check text and alerts above it, then make a short local recording before going live.
Set up a PNG overlay in OBS Studio
Open the scene you use for gameplay. Select Add Source, choose Image, create a new source, and select the transparent PNG. In the Sources panel, drag the overlay above your console or game capture.
Right-click the overlay, open Transform, and choose Fit to Screen. If your base canvas is 1920×1080 and the overlay has the same dimensions, its position should be X 0 and Y 0. Lock the source once it is aligned.
- Keep gameplay below the overlay.
- Keep chat, alerts, or editable score text above it when those elements must remain visible.
- Do not add a colour key to a PNG that already has transparency.
Set up an animated WEBM overlay
Add a Media Source instead of an Image source. Select the WEBM file, enable Loop when the animation should repeat, and enable Restart playback when source becomes active for scene transitions.
WEBM files supplied as transparent overlays should not need chroma keying. If a black box appears, confirm that the file itself has an alpha channel and that hardware or browser playback has not been substituted for the original download.
- Disable Close file when inactive if reopening causes a visible delay.
- Keep the source at its original aspect ratio.
- Test CPU and GPU usage with gameplay running, not on an empty scene.
Streamlabs and common fixes
In Streamlabs, add an Image or Media File source and use the same source order. Fit the asset to the 1920×1080 canvas, lock it, and preview the scene at the resolution you actually stream.
An overlay is a visual layer; it does not automatically update scores, timers, teams, or player data unless it is paired with a separate live-data source.
- Wrong size: confirm both base canvas and asset dimensions.
- Overlay hidden: move it above game capture and confirm the eye icon is active.
- Blurry edges: avoid repeatedly scaling a small source above its native size.
- Animation stutters: compare a local recording with the editor preview and reduce competing media sources.
Put it into practice