To set a full-page background image with CSS, use background-size: cover, properly set html and body height, and ensure responsiveness across devices. 1. Apply background-size: cover to scale the image while maintaining aspect ratio. 2. Set html and body { height: 100%; margin: 0; } to ensure full-page coverage. 3. Add fallbacks like background-color and optimized images for performance. 4. Use object-fit: cover with an img tag for better control on mobile if fixed backgrounds behave inconsistently.

Setting a full-page background image with CSS is one of those common tasks that every front-end developer ends up doing at some point. It's not complicated, but there are a few key things to get right—especially if you want it to look good on all screen sizes and devices.

Here’s how to do it properly without running into issues like stretching, tiling, or images not covering the whole page.

Use background-size: cover for full coverage

This is probably the most important part. If you want your background image to always fill the entire browser window, no matter the screen size, use:

body {
  margin: 0;
  min-height: 100vh;
  background: url('your-image.jpg') no-repeat center center fixed;
  background-size: cover;
}

• no-repeat prevents tiling.
• center center ensures the image is centered both vertically and horizontally.
• fixed makes the background stay in place while content scrolls (optional).
• cover scales the image to cover the entire viewport while maintaining aspect ratio.

Note: Some older browsers might not support background-size: cover, but modern ones do.

Set HTML and body height properly

One of the most common mistakes is forgetting to set the height of the html and body elements. By default, they might not take up the full height of the screen.

html, body {
  height: 100%;
  margin: 0;
}

Without this, your background image may only cover part of the page, especially if the content is short.

Also make sure your body has min-height: 100vh if you're using flexbox or other layout techniques that depend on full viewport height.

Add fallbacks and enhancements

Even though background-size: cover works well, sometimes you might want to add a few extras to improve appearance and performance.

• Use a high-quality image, but compress it for faster loading.

• Consider adding a background-color as a fallback in case the image fails to load.

  background: #000 url('image.jpg') no-repeat center center fixed;

• For better control over image positioning, try using background-position. For example, background-position: top center; can help highlight specific parts of the image.

• If you’re overlaying text or buttons on top of the image, consider using ::before with a semi-transparent background to make the content more readable.

Watch out for mobile behavior

On mobile devices, especially iOS, background-attachment: fixed might not work as expected. Scrolling can cause the background to behave differently than on desktop.

If you need consistent behavior across all devices:

• Avoid fixed unless it's essential.
• Or wrap your image in an img tag and position it absolutely behind everything else. That gives you more control.

<div class="background">
  <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="CSS tutorial for creating a full-page background image">
</div>

.background {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  overflow: hidden;
}

.background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

This method also lets you use object-fit, which behaves similarly to background-size: cover but gives you more flexibility when working with actual image elements.

So yeah, setting a full-page background image with CSS isn’t hard once you know the basics. Just remember to handle the body and HTML sizing, use background-size: cover, and test on different devices. Everything else is just polish depending on what you’re trying to achieve.

The above is the detailed content of CSS tutorial for creating a full-page background image. For more information, please follow other related articles on the PHP Chinese website!