如何设置全屏响应式背景图？现有代码仅显示居中效果求解决方案

Hey there! Let's get that background image filling the screen properly. I'll break down the issues in your current code and share a working solution.

Issues in Your Current Code #

Looking at your CSS, a few things are preventing the image from going full-screen:

• .wrapper-hero has max-width: 1920px, which caps its width and stops it from stretching to the edges of smaller screens.
• .hero-image uses fixed width: 1200px and height: 800px, so it can't adapt to different screen sizes.
• You have redundant background-size declarations (contain followed by cover)—only the last one takes effect, but the fixed dimensions make it irrelevant anyway.

Working Solution #

Here's the adjusted CSS to make your background image fill the entire screen (or the hero section, depending on your needs):

.wrapper-hero {
  width: 100vw; /* Takes up the full width of the viewport */
  min-height: 100vh; /* Ensures the hero section covers the full viewport height */
  overflow: hidden; /* Prevents any image overflow from showing */
}

.wrapper-hero .hero-image {
  width: 100%; /* Fills the entire width of the wrapper */
  height: 100%; /* Fills the entire height of the wrapper */
  background: url('@{baseDir}images/hero-image.png') no-repeat center center;
  background-size: cover; /* Scales the image to cover the entire container (cropping edges if needed) */
  background-position: center; /* Keeps the image centered as it scales */
}

Key Changes Explained: #

• 100vw and 100vh: These units use the viewport's width and height, so the hero section will always match the user's screen size.
• width: 100% and height: 100% on .hero-image: Makes the background container fill its parent wrapper completely.
• background-size: cover: This ensures the image stretches to cover the entire container without distorting its aspect ratio. If the image's aspect ratio doesn't match the container, it will crop the edges (but keeps the center focused, thanks to background-position: center).

Alternative: If You Don't Want Full Viewport Height #

If you want the hero section to be a fixed height (like your original 800px) but still full width, just adjust the wrapper's height:

.wrapper-hero {
  width: 100%; /* Full width instead of viewport width */
  height: 800px; /* Fixed height */
  overflow: hidden;
}

This will keep the hero section at 800px tall but stretch across the entire screen width, with the background image covering the whole area.

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