如何修改行背景图宽度且不影响该行的最大宽度

嘿，这个场景我做项目时也碰到过！你现在的问题是把背景图直接绑在宽度受限的.et_pb_row元素上，所以背景图自然只能跟着行的80%宽度走。要实现背景图占100%视口宽度，但行内容依然保持80%最大宽度的效果，最稳妥的方法是用伪元素单独承载背景，具体操作如下：

步骤1：调整原行的样式 #

保留你原来的.et_pb_row基础样式，然后修改目标行（.et_pb_row_0）的样式，移除原背景图并确保它能作为伪元素的定位容器：

.et_pb_row {
  position: relative;
  width: 80%;
  max-width: 1920px;
  margin: auto;
}

.et_pb_row_0 {
  z-index: 1; /* 确保行内容在背景之上 */
  background-image: none; /* 删掉原来的背景图，改用伪元素承载 */
}

步骤2：添加伪元素作为背景层 #

给.et_pb_row_0添加一个::before伪元素，让它撑满整个视口宽度，同时和行内容居中对齐：

.et_pb_row_0::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 让伪元素相对于行居中，从而撑满左右视口 */
  width: 100vw; /* 占满整个浏览器视口宽度 */
  height: 100%; /* 和行的高度保持一致 */
  background-image: url(http://fordent.uk.w3pcloud.com/wp-content/uploads/2019/01/GettyImages-532174359.jpg);
  background-size: contain; /* 保留你原来的背景缩放方式，也可换成cover按需调整 */
  background-position: top right;
  z-index: -1; /* 把背景层放在行内容的后面 */
}

原理说明 #

• 伪元素通过position: absolute脱离文档流，完全不会影响行本身的布局和宽度限制；
• width: 100vw让它直接占满整个浏览器视口的宽度，不受父元素的宽度约束；
• left:50% + transform: translateX(-50%)确保背景层和行内容居中对齐，不会出现左右偏移；
• z-index的层级设置保证行内的文字、按钮等内容能正常显示在背景图上方。

如果希望背景图完全覆盖伪元素区域（不留空白），可以把background-size: contain改成background-size: cover，根据你的视觉需求调整即可。

内容的提问来源于stack exchange，提问作者sharmarke.i