如何在React中使用CSS设置全屏背景图片？

Hey there! Let's get that background image filling the entire screen properly. Looking at your code, there are a couple of quick adjustments needed to make this work:

1. Correct the Background Property Mix-Up #

First, you used backgroundPosition: 'cover' — but cover is actually a value for backgroundSize, not backgroundPosition. That's one key reason your image isn't scaling correctly to fill the screen.

2. Force the Div to Fill the Viewport #

By default, a <div> only takes up as much space as its content. To make it span the entire screen, you need to set its width and height to match the viewport, and remove any default spacing that might be pushing it inward.

Here's the revised code with these fixes:

<div 
  style={{
    backgroundImage: `url(${defaultImages.backgroundOfImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover', // Fixed this property to control scaling
    backgroundPosition: 'center', // Centers the image nicely if it doesn't fit perfectly
    width: '100vw', // Takes full viewport width
    height: '100vh', // Takes full viewport height
    margin: 0, // Removes default div margin
    padding: 0, // Removes default div padding
    overflow: 'hidden' // Prevents unwanted scrolling if image overflows
  }} 
>
  {/* Your content goes here */}
</div>

Bonus: Fix Browser Default Body Margins #

If you still see a tiny white border around the edge, it's almost certainly from the browser's default body margin. You can fix this by adding a quick global style (either in a CSS file or inline in your root component):

body {
  margin: 0;
  padding: 0;
}

This ensures there's no hidden spacing pushing your full-screen div inward.

With these changes, your background image should stretch perfectly across the entire screen!

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