求助：实现CSS背景图铺满桌面与移动端全窗口的一站式方案及解决移动端Chrome背景图下方空白问题

Hey there! I see you're stuck with that annoying blank space at the bottom of your background image on mobile Chrome—let's get this sorted out right away. The issue usually boils down to a couple of easy-to-fix CSS oversights and missing viewport configuration. Here's how to tackle it step by step:

1. Fix the Invalid background-position Value #

First up, you've got a small mistake in your CSS: background-position: relative; isn't a valid value for that property. background-position uses positioning keywords like center, top, or coordinate pairs—not layout keywords like relative. For a perfectly centered, full-coverage image, swap it with:

background-position: center center;

2. Make html and body Cover the Entire Viewport #

Mobile browsers don't automatically force html and body to take up the full screen height, which often leaves gaps. Add these styles to ensure they stretch to every corner:

html, body {
  height: 100%;
  min-height: 100vh; /* Fallback for newer browsers using viewport height */
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Stop unwanted horizontal scrolling */
}

3. Add the Viewport Meta Tag #

Without this tag, mobile Chrome might render your page with a scaled viewport, leading to unexpected spacing. Drop this into your <head> section:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

The viewport-fit=cover part helps avoid gaps caused by mobile browser UI elements (like the address bar) on newer devices.

Full Working Code Example #

Here's the complete, polished code to replace your existing setup:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <style>
    html, body {
      height: 100%;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    body {
      background-image: url('https://i0.wp.com/www.socialnews.xyz/wp-content/uploads/2020/10/26/5573c6f0bee7ca021f4a8aecbaf6cbeb.jpg?quality=80&zoom=1&ssl=1');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      background-attachment: fixed; /* Optional: Keeps image fixed while scrolling */
    }
  </style>
</head>
<body>
  <!-- Your page content goes here -->
</body>
</html>

Why This Works #

• The html, body height settings ensure the root elements take up the full screen height, so the background has no empty space to leave behind.
• background-position: center center keeps the image centered no matter the screen size, preventing awkward cropping or gaps.
• The viewport meta tag tells mobile Chrome to render the page at the device's actual width, eliminating scaling-related spacing issues.

Give this a test run—it should fix that blank space on mobile Chrome while keeping the background working flawlessly on desktop too!

内容的提问来源于stack exchange，提问作者Kyoko Chidori