如何让WordPress自定义区块的背景图片突破容器延伸至屏幕边缘？

当前你的布局中，背景图被限制在.container范围内（容器最大宽度80%），要让背景图延伸至屏幕边缘，可通过以下两种方法实现：

方法一：使用伪元素实现背景延伸 #

通过给背景列添加伪元素，让伪元素覆盖从当前列到屏幕边缘的区域，既保留原有布局结构，又实现背景延伸。

修改后的代码 #

CSS

.container {
  max-width: 80%;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-direction: row-reverse;
  overflow: hidden; /* 避免伪元素超出部分触发滚动条 */
}

.col {
  flex-basis: 50%;
  position: relative; /* 作为伪元素的定位基准 */
}

/* 新增伪元素样式，实现背景延伸 */
.col.border::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0; /* 适配row-reverse布局，向右侧延伸至屏幕边缘 */
  width: 100vw;
  height: 100%;
  background: url('https://plus.unsplash.com/premium_photo-1694825173871-7b5df4d57ba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2310&q=80') no-repeat center/cover;
  border-bottom-left-radius: 50%;
  z-index: -1; /* 确保伪元素在内容下方，不遮挡文字 */
}

.btn {
  padding: 5px 10px;
  background: blue;
  color: white;
}

.body {
  margin-bottom: 15px;
}

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col border" style="min-height: 460px;">
    </div>
    <div class='col'>
      <h2 class='copyimage__title'>My Title</h2>
      <div class="body">This is the copy</div>
      <div class="align-items-center">
        <a href="#" class="btn btn-primary">
                  Button
                </a>
      </div>
    </div>
  </div>
</div>

方法二：调整布局结构，用全宽容器包裹背景列 #

给背景列套一个100%视窗宽度的容器，通过定位让它居中对齐屏幕，直接突破原有容器的限制。

修改后的代码 #

CSS

/* 新增全宽背景容器 */
.full-width-bg-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%); /* 让容器居中对齐视窗 */
}

.container {
  max-width: 80%;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-direction: row-reverse;
}

.col {
  flex-basis: 50%;
}

.border {
  border-bottom-left-radius: 50%;
  background: url('https://plus.unsplash.com/premium_photo-1694825173871-7b5df4d57ba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2310&q=80') no-repeat center/cover;
  min-height: 460px;
}

.btn {
  padding: 5px 10px;
  background: blue;
  color: white;
}

.body {
  margin-bottom: 15px;
}

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="full-width-bg-wrapper">
      <div class="col border">
      </div>
    </div>
    <div class='col'>
      <h2 class='copyimage__title'>My Title</h2>
      <div class="body">This is the copy</div>
      <div class="align-items-center">
        <a href="#" class="btn btn-primary">
                  Button
                </a>
      </div>
    </div>
  </div>
</div>

WordPress自定义区块适配提示 #

• 若使用Gutenberg自定义区块，需将上述CSS同时添加到区块的编辑样式和前端样式中，确保编辑器内也能预览效果。
• 建议将背景图URL设为区块的自定义属性，让用户可在编辑器中上传/选择图片，无需硬编码在CSS内。

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