# Building a FiveM loading screen that fits every resolution

> What resolution a FiveM loading screen should be, and how to make one that looks right on 1080p, 1440p, 4K and ultrawide: viewport units, object-fit, safe areas, clamp() typography and how to test without launching the game.

Source: https://fam-tools.com/guides/fivem-loading-screen-resolution-responsive · FAM Tools · published 2026-09-11 · updated 2026-09-11 · about 11 min

**Short answer.** There is no fixed resolution. Design at 1920×1080, then build the page with viewport units: a full-screen background using `object-fit: cover`, text sized with `clamp()`, and all important content inside a centred safe area. Test by resizing a normal browser window before you ever launch the game.

## Key points

- The loading screen fills the game window, so its size is the **player’s resolution**, not yours.
- Backgrounds: a full-viewport element with `object-fit: cover` — crops instead of stretching.
- Text: `clamp(min, vw-based, max)` keeps it readable on laptops and sane on 4K.
- Keep logos and text in a **centred 16:9 safe area**; let the art bleed outside it.
- Test in any desktop browser at 1280×720, 1920×1080, 2560×1440 and 3440×1440.

A FiveM loading screen is not an image — it is a web page drawn by the game’s built-in Chromium at whatever resolution the player runs GTA V. That single fact explains most of the stretched logos, cut-off text and blurry backgrounds on loading screens. This guide shows how to design once at 1920×1080 and have the page look deliberate on every screen, from a 1366×768 laptop to a 3440×1440 ultrawide.

## Why loading screens look wrong on some screens

Most broken loading screens were built the way you would build a poster: a 1920×1080 canvas with absolutely positioned elements measured in pixels. On the designer’s monitor it is perfect. On a 2560×1440 screen the same pixels occupy a smaller share of the window, so everything shrinks into the top-left; on a 21:9 ultrawide the background leaves bars or stretches; on a laptop the bottom of the page falls off the screen.

| Resolution | Aspect | Who has it |
| --- | --- | --- |
| 1920×1080 | 16:9 | By far the most common gaming resolution |
| 2560×1440 | 16:9 | Common on mid and high-end PCs |
| 3840×2160 | 16:9 | 4K monitors and TVs |
| 1366×768 / 1600×900 | ≈16:9 | Laptops |
| 1920×1200 / 2560×1600 | 16:10 | Many laptops and some monitors |
| 3440×1440 / 2560×1080 | 21:9 | Ultrawide monitors |

The fix is not a bigger image — it is building the page so it adapts. A loading screen that adapts looks intentional everywhere, and it is not harder to build than one that does not.

## The base layout

Start by making the page exactly the size of the window and preventing scrollbars, then place the background as a separate full-screen layer.

*style.css*

```css
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05070d;
}

.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fill the window, crop the excess */
  object-position: center;
  z-index: -1;
}

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}
```

*index.html*

```html
<img class="bg" src="bg.webp" alt="">
<main class="stage">
  <div class="safe">
    <img class="logo" src="logo.png" alt="My City">
    <p class="tagline">Serious roleplay since 2021</p>
  </div>
</main>
```

> **cover vs contain** — `object-fit: cover` fills the screen and crops the edges; `contain` shows the whole image with bars. For backgrounds use `cover` and keep nothing important near the edges of the art.

## A safe area that survives every aspect ratio

Put your logo, text and progress bar inside a box that keeps a 16:9 shape and never exceeds the window in either direction. On an ultrawide it sits in the middle with the background extending to the sides; on a 16:10 laptop it fits the width.

*A 16:9 safe area*

```css
.safe {
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  padding: 4vh 4vw;
  box-sizing: border-box;
}
```

Everything inside the safe area can now be sized relative to it, which is what keeps proportions identical from 720p to 4K.

## Text that stays readable: clamp()

Pixel font sizes are tiny on 4K and huge on a laptop. Viewport-based sizes on their own go too far the other way. `clamp()` gives you a size that scales with the screen but never below a minimum or above a maximum.

*Fluid type*

```css
.title   { font-size: clamp(28px, 3.2vw, 72px); }
.tagline { font-size: clamp(14px, 1.2vw, 26px); }
.tip     { font-size: clamp(13px, 0.95vw, 20px); line-height: 1.5; }

.logo {
  width: clamp(180px, 22vw, 640px);
  height: auto;
}
```

- Minimums protect laptops: 13–14 px is the floor for body text.
- Maximums protect 4K: without them a 5vw headline is 190 px tall.
- Size images the same way — the logo scales with the screen and never overflows.

## Choosing image resolution

Because the background is cropped rather than scaled up, a 1920×1080 image looks sharp on most screens. A 2560×1440 image is worth it if your art has fine detail (text, thin lines); 4K backgrounds rarely are, because every player downloads them before the page is complete. The [image sizes guide](https://fam-tools.com/guides/fivem-image-sizes-assets-guide) lists every size, and [loading screen performance](https://fam-tools.com/guides/fivem-loading-screen-performance) explains why weight matters more than pixels.

| Background | When to use it | Target file size |
| --- | --- | --- |
| 1920×1080 WebP q80 | Default for almost every screen | 200–600 KB |
| 2560×1440 WebP q80 | Detailed art, many 1440p players | 400 KB – 1.2 MB |
| 3840×2160 | Almost never | Often 2–5 MB — slower first paint |

## Testing without launching GTA V

Because it is a web page, you can build and test a loading screen in any desktop Chromium browser.

1. Open `index.html` directly, or serve the folder with any local web server.
2. Open DevTools and toggle the device toolbar.
3. Add custom sizes: 1280×720, 1366×768, 1920×1080, 2560×1440, 3440×1440 and 3840×2160.
4. Check the logo, text and progress bar stay inside the safe area on each.
5. Only then test in game — and use the NUI DevTools to inspect it live, as described in [NUI debugging](https://fam-tools.com/guides/fivem-nui-devtools-debugging).

> **Game-only behaviour** — The loading events that drive a progress bar only exist inside FiveM. When testing in a browser, fake them with a small script that posts `loadProgress` messages to the window — see [the progress bar guide](https://fam-tools.com/guides/fivem-loading-screen-progress-bar).

## Questions

### What resolution should a FiveM loading screen be?

Design at 1920×1080, but build the page responsively. The loading screen fills the player’s game window at their resolution, so a responsive page is what looks right everywhere.

### Why is my loading screen stretched?

The background is probably sized with `width: 100%; height: 100%` on an image without `object-fit`. Use `object-fit: cover` so the image crops instead of stretching.

### Why is my loading screen cut off on some monitors?

Elements are positioned in fixed pixels. Put them in a centred safe area sized with viewport units, and size text with `clamp()`.

### Do I need a 4K background?

Usually not. A 1920×1080 or 2560×1440 WebP looks sharp on most screens and loads much faster, which players notice more than extra pixels.

### How does the loading screen look on an ultrawide monitor?

With `object-fit: cover` the background fills the extra width and a 16:9 safe area keeps your content centred, so it looks deliberate rather than stretched.

## Related

- https://fam-tools.com/guides/fivem-image-sizes-assets-guide
- https://fam-tools.com/guides/fivem-loading-screen-performance
- https://fam-tools.com/guides/fivem-loading-screen-html-tutorial
- https://fam-tools.com/guides/fivem-loading-screen-fonts