Elementor section背景图适配任意分辨率问题咨询

一、原生设置修正（无需写代码） #

• 背景参数调整
  • 背景大小：若需完整显示背景图无裁切，选择contain；若需尽可能铺满容器同时不拉伸图片，选择自定义值100% auto
  • 背景重复：设置为「不重复」
  • 背景位置：根据背景图核心内容区域调整，核心内容居中选居中居中，核心内容靠上选顶部居中
  • 背景附加：设置为「滚动」，避免移动端固定背景的兼容裁切问题
• Section高度适配调整
  切换到Section的「高级」选项卡，将高度设置改为「最小高度」，值设为100VH，同时开启「自适应内容高度」，保证容器高度会跟随背景图比例和屏幕分辨率动态调整，避免固定高度导致的强制裁切。

二、自定义CSS兜底方案 #

如果原生设置不生效，按以下步骤操作：

1. 选中目标Section，在「高级」选项卡的「CSS类」输入框中填写自定义类名custom-bg-section并保存
2. 将以下CSS代码添加到Elementor后台「自定义代码」模块，或者主题的自定义CSS输入框中：

/* 桌面端适配 */
.custom-bg-section {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}
/* 移动端适配 */
@media (max-width: 768px) {
    .custom-bg-section {
        /* 移动端如果contain留白过多，可替换为background-size: cover !important */
        background-size: contain !important;
        background-position: top center !important;
        min-height: 60vh !important;
    }
}

3. 保存后清除Elementor缓存、浏览器缓存后再测试效果。

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