Building a FiveM loading screen that fits every resolution

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.

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.

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

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;
}

<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>

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.

.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.

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.

.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.

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 lists every size, and loading screen performance explains why weight matters more than pixels.

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

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