如何在WordPress Elementor中设置适配全屏宽度的背景图片

问题原因排查 #

你现有代码存在几个语法错误和适配问题：

• CSS属性使用错误：background-repeat: no-repeat center fixed 是非法写法，center 属于background-position属性、fixed属于background-attachment属性，不能写在background-repeat后面
• 固定最小宽度限制了适配：min-width: 1920px 会让容器在小于1920px宽度的设备上无法自适应，直接导致内容溢出、右侧被裁剪
• 固定高度+background-size: cover的组合无法保证图片比例：固定603px高度的情况下，屏幕宽度变化时，背景图会自动裁剪来覆盖容器，自然无法保持原始比例

修复方案 #

你可以用固定比例容器+自适应背景的方案实现需求，修改后的代码如下：

<div id="kunstplein1920"></div>

#kunstplein1920 {
  /* 背景相关设置分开写避免语法错误 */
  background: url(你的图片链接) no-repeat center center;
  background-size: cover;
  /* 宽度设为100%适配父容器/屏幕宽度，去掉固定最小宽度 */
  width: 100%;
  /* 用padding-top按图片原始比例撑高容器，你的图片是1920*603，比例是603/1920≈31.4% */
  padding-top: 31.4%;
  /* 不需要固定高度，高度会随宽度自动按比例计算 */
  height: 0;
}

如果你不希望图片任何部分被裁剪，可以把background-size: cover改成background-size: contain，同时可以加上background-color: 你想要的底色填充图片比例和容器不一致时的空白区域。

Elementor原生方案（不需要写代码） #

你用Elementor的话其实不需要手动写代码，直接操作就可以：

1. 新建一个节（Section），点击节的设置
2. 在「布局」选项卡把「内容宽度」设为「全宽」，「盒装宽度」留空
3. 切换到「样式」选项卡，「背景」选「经典」，上传你的背景图
4. 背景位置选「居中居中」，重复选「不重复」，尺寸选「覆盖」
5. 再回到「布局」选项卡，把「最小高度」的单位改成「VW」，输入31.4（就是刚才的比例，100vw宽度对应31.4vw高度，刚好是你图片的原始比例）
   保存之后就能实现全屏宽度、自动保持比例的背景图效果。

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