如何实现左右分屏布局：左侧放内容，右侧仅显示背景图

下面提供几种简洁可靠的实现方案，解决你背景图全屏显示的问题：

方案1：Flex 布局（推荐） #

通过flex容器将页面平分为左右两个区块，左侧承载内容，右侧单独作为背景图容器，确保背景仅占右半屏。

<div class="split-container">
  <div class="content-left">
    <!-- 你的自定义内容 -->
    <h1>左半部分内容区</h1>
    <p>这里可以放置文本、表单、按钮等各类元素</p>
  </div>
  <div class="bg-right"></div>
</div>

/* 全局重置，消除默认边距和内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 让容器占满整个视口高度 */
.split-container {
  display: flex;
  height: 100vh;
}

/* 左侧内容区，占50%宽度，可自定义内边距和排版 */
.content-left {
  width: 50%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 右侧背景图容器，占50%宽度，设置背景图属性 */
.bg-right {
  width: 50%;
  background-image: url('你的背景图路径');
  background-size: cover; /* 保持比例覆盖容器 */
  background-position: center; /* 背景图居中显示 */
}

方案2：Grid 布局 #

利用网格布局快速拆分两列，实现等宽分屏效果，代码更简洁。

<div class="split-container">
  <div class="content-left">
    <h1>左半部分内容区</h1>
    <p>这里可以放置文本、表单、按钮等各类元素</p>
  </div>
  <div class="bg-right"></div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.split-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽分配 */
  height: 100vh;
}

.content-left {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bg-right {
  background-image: url('你的背景图路径');
  background-size: cover;
  background-position: center;
}

方案3：绝对定位（适配特殊场景） #

如果需要更灵活的层级控制，可使用绝对定位将背景图容器固定在右侧。

<div class="content-left">
  <h1>左半部分内容区</h1>
  <p>这里可以放置文本、表单、按钮等各类元素</p>
</div>
<div class="bg-right"></div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content-left {
  width: 50%;
  height: 100vh;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1; /* 确保内容在背景图上方 */
}

.bg-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100vh;
  background-image: url('你的背景图路径');
  background-size: cover;
  background-position: center;
}

注意事项 #

• 将代码中的url('你的背景图路径')替换为实际的图片地址或相对路径
• background-size可根据需求调整：cover保持比例覆盖容器，contain保证图片完整显示，100% 100%强制拉伸填充（可能导致变形）
• 设置height: 100vh确保容器占满整个屏幕高度

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