Member Avatar for Loopster

Hey everyone,
Has anyone found the best html/css solution for creating a fluid background image on a website?
That's to say:
1. Background image to fill the screen no matter of the size of the screen
2. Keeping image size smaller so as to have fastest load time
3. cross-browser, cross-device (PCs, Mobile phones, etc), cross-resolution compatibility
4. Image keeps its proportions as it is resized to fill the display

Please discuss,
Loopster

  • 2 Contributors
  • 2 Replies
  • 103 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by twiss

Dani AI

Generated

For 's four goals (fill-screen, small file size, cross-device/browser, preserve aspect ratio) the best practical approach is progressive enhancement: use modern browser features where available and deliver appropriately sized files so phones don't download huge desktop assets. As noted, modern CSS handles the visual covering — pair that with responsive delivery and fallbacks for older browsers.

Start by producing several resized versions of the background (mobile/tablet/desktop) plus 2x variants for high-DPI. Serve modern, compressed formats (AVIF/WebP) with JPEG/PNG fallbacks and let the browser pick the best file via responsive markup. Example markup pattern:

<picture>
  <source type="image/avif" srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1600.avif 1600w" sizes="100vw">
  <source type="image/webp" srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w" sizes="100vw">
  <img src="hero-800.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="100vw" alt="Decorative background">
</picture>

An alternative that keeps the image semantically present (so you get alt text and easier fallbacks) is to place an <img> behind the page content and use object-fit: cover in CSS. That behaves like a fluid background while letting you serve responsive sources via srcset. Example CSS:

/* markup: <img class="bg-cover" src="..."> */
.bg-cover {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
}

Quick tips: avoid fixed-attachment tricks on mobile (poor performance), use a low-quality placeholder or progressive decode for perceived speed, test with throttled networks and Lighthouse, and add a simple conditional fallback (static crop or JS resize) for very old IE. For browser support and detailed patterns see MDN on responsive images (MDN Responsive Images) and on object-fit (MDN Object-fit), and the web.dev guide on serving responsive images (Serve responsive images).

Recommended Answers

All 2 Replies

Member Avatar for twiss

What you could do is start with

background-size:cover;
-moz-background-size:cover;

and then find a workaround for IE <= 8.

Edited by twiss because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.