If you've ever tried to set a CSS background image and truly make it take up the entire screen, you know it's not as trivial as it sounds. Sometimes the image repeats, other times it leaves white space or looks distorted. In this guide, I'll show you, through practical examples, how to do it correctly, quickly, and without losing quality.
In this post, we will look at a technique that allows a background image to cover the entire width of the web browser.
1. What “occupy the whole screen” really means in CSS
When we talk about a background that occupies the whole screen, what we are looking for is for the image to fill the entire viewport, regardless of the size of the monitor or mobile device.
This involves three challenges:
- That it doesn't repeat.
- That it doesn't get distorted.
- That it adapts if the user resizes the window (and they will, trust me).
The first time I tried using a huge image on a mobile device, the load took ages and the result wasn't even better. Since then, I learned that "occupying the whole screen" is not just about CSS, but also about performance.
2. The key rule: background-size: cover (and why it works so well)
Here comes the magic.
The background-size: cover property tells the browser:
"Scale the image as large as possible so that it always covers the entire background area... even if a little of the edges has to be cropped."
It is exactly what we want for a full-screen background.
When you resize the window (I recommend you do it to understand it well), you'll notice that the image always remains adapted. I remember the first time I played with this: I saw the image readjusting itself and I thought: "okay, this is what I needed."
Why cover works so well
- It maintains the image's aspect ratio.
- It reaches all edges of the viewport.
- It avoids the famous "white space" on tall or wide screens.
3. Minimum recommended background configuration (the foolproof combo)
If you want a perfect background, cover is not enough. The ideal is to combine several properties. This is what I always use:
body {
background-image: url('img/background_2500.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}Now let's break it down:
background-position: center center
Places the image's focus in the middle, X and Y.
The most interesting part of the image is usually right there, so centering it is almost always a safe bet.
- background-repeat: no-repeat
- Avoids the "tile carpet." Only one image is displayed.
- background-attachment: fixed vs scroll
- fixed → creates a simple parallax-like effect.
- scroll → the background moves along with the content.
4. How to write the basic HTML and CSS for a full-screen background
You don't need anything strange in the HTML, just this:
<body> <!-- content --></body>And in the CSS, you simply apply the background to the body.
However: make sure that **html, body { height: 100%; margin: 0; }** is present to avoid jumps or gaps, especially in older browsers.
5. Optimizing the image: weight, resolution, and recommended formats
Important rules:
- Don't use a 5000px image for mobile devices.
- PNG only if you need transparency; JPG or WebP are lighter.
- Use tools like Squoosh or TinyPNG to reduce weight without losing quality.
In my case, I used to load a huge image "just in case." Then I understood that the user won't appreciate detail that their screen cannot show, and you only worsen the load time.
6. Responsive backgrounds with media queries (without loading giant images)
This is one of the most powerful parts I learned with real practice: serve different images depending on the device width.
Another possible addition consists of using Media Queries; with Media Queries, images can be set according to the resolution of the device (phone, tablet, computer) accessing the page; that is, if the user accesses from a device that has a resolution of 1280x720 pixels, it doesn't make much sense to use an image with larger dimensions since the detail will not be appreciated and, furthermore, it would take longer to load.
This logically affects the overall performance of the site and the final user experience; using an image with smaller dimensions than the device's resolution is also not a good idea in most cases because it would be pixelated; we could establish some Media Queries like the following.
@media only screen and (max-width: 480px) {
body {
background-image: url('img/background_480.jpg');
}
}
@media only screen and (max-width: 1280px) {
body {
background-image: url('img/background_1280.jpg');
}
}The first time I used it, I noticed that the website loaded much faster on mobile devices. And without losing aesthetics.
Each media query contains a simple rule that indicates the URL of the image to load; as you may have realized, the name of the image indicates its width; that is:
- The width of background_1980.jpg is 1980px
- The width of background_1280.jpg is 1280px
- The width of background_480.jpg is 480px
Basically, a series of rules are specified that are executed or not depending on the screen dimensions of the device accessing the site, specifically the maximum width value the device screen can have to execute its internal CSS; that is, if a user accesses with a device that has 480px or 320px of width, the first media query will be executed, and this will avoid loading the image that has a width of 2500px.
If the device has 980px or 1280px of width, then the second rule will be executed; this way, images with smaller dimensions and therefore lower weight are loaded, adjusting better to the device's specifications; it must be taken into account that loading an image with larger dimensions than needed will only slow down the site's loading time.
When to use this?
- If your image weighs more than 500 KB.
- If your project receives traffic from mobile devices (which is almost always the case).
- If the same image has optimized versions.
7. Comparison: cover vs contain vs auto
- Value What it does When to use it
- cover Covers the entire area and crops if necessary Full-screen backgrounds
- contain Shows the entire image without cropping If you don't want to lose detail
- auto Maintains original size Small or repeated backgrounds
8. Common mistakes that break a full-screen background
- Loading images that are too large
- → they slow down the site and don't add anything.
- Not using no-repeat
- → unintentionally "tiled" background.
- Forgetting background-position
- → the important part of the image is left outside the visible area, and it's not centered.
- Not using media queries
- → mobile devices load images they don't need.
- Putting the background in a div with limited height
- → better use **body** or a container with **height: 100vh.**
9. Complete example ready to copy/paste
Here is the complete exercise:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background-image: url('img/background_2500.jpg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* versiones para móvil y tablet */
@media only screen and (max-width: 480px) {
body {
background-image: url('img/background_480.jpg');
}
}
@media only screen and (max-width: 1280px) {
body {
background-image: url('img/background_1280.jpg');
}
}10. Conclusion
Putting a CSS background image that occupies the entire screen is not complicated... if you use the correct properties and optimize the images.
The key is:
- background-size: cover
- background-position: center center
- background-repeat: no-repeat
- background-attachment: fixed
And media queries to serve the appropriate image.
With these techniques, you can have elegant, fast, and adaptable full-screen backgrounds, just like the best websites use.
We will use the cover value of the CSS background-size property, which will do almost all the work for us; combined with other rules that will help improve the final experience.
The background-size property defines how the image to be set in the background will be displayed; with the cover value: "specifies that the background image should be scaled as small as possible while ensuring both of its dimensions are greater than or equal to the corresponding dimensions of the background positioning area." (Mozilla Developer).
To understand the idea a little better, let's look at a couple of examples; I invite you to resize the window and see its behavior:
- Example of a background with the cover value in the background-size property
- Example of a background without the cover value in the background-size property
background-size: cover;
You can see the final example by clicking here .
I agree to receive announcements of interest about this Blog.
Learn how to set a full-screen background image in CSS using background-size: cover, media queries, and ready-to-copy examples. A practical, fast, and optimized guide.