技术求助：如何实现两张背景图右侧互补拼接为完整整体

It looks like the main issue with your current setup is that your .left-content element is set to width: 100% and uses position: absolute, which takes up the entire viewport width—leaving no space for the second image. Here's a straightforward fix to get your two images sitting side-by-side as a cohesive background:

Step 1: Update Your HTML Structure #

First, make sure you have both left and right content containers inside your wrapper:

<div class="home-wrapper">
  <div class="left-content"></div>
  <div class="right-content"></div>
</div>

Step 2: Corrected CSS Code #

We'll use Flexbox to easily align the two halves side-by-side. This eliminates the need for absolute positioning and floats, which were causing overlap issues:

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; /* Ensures borders/padding don't affect width calculation */
}

.home-wrapper {
  height: 100vh; /* Takes full viewport height */
  width: 100%;
  display: flex; /* Aligns child elements horizontally */
  overflow: hidden;
}

.left-content {
  background: url(../img/leftwing.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; /* Centers the image within the div */
  width: 50%; /* Takes half the wrapper width */
  height: 100%;
  border-right: 1px solid black; /* Keeps your separator border */
}

.right-content {
  background: url(../img/rightwing.png); /* Replace with your right image path */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 50%; /* Takes the other half */
  height: 100%;
}

Key Changes Explained: #

• Added box-sizing: border-box to the global reset: This ensures that the border on .left-content doesn't add extra width, preventing any overflow or misalignment.
• Set .home-wrapper to display: flex: This automatically arranges the two child divs side-by-side without needing floats or absolute positioning.
• Changed each content div to width: 50%: Splits the wrapper evenly between the two images.
• Removed position: absolute and float: left from .left-content: Flexbox handles the layout cleanly, so these properties are no longer needed and were causing the full-width overlap.
• Added background-position: center to both divs: Ensures your images are centered within their respective halves, which helps them look cohesive as a single whole.

If you want the images to align perfectly at the center (so the split line matches the image's natural seam), you might need to adjust background-position slightly for one or both images—for example, background-position: right center on the left image and background-position: left center on the right image, depending on how your source images are cropped.

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