CSS给div设置背景图片不生效，应用到body标签却可正常显示

你当前遇到的问题核心是空div没有设置高度，也没有内部内容支撑高度：

• class为back的div内部无任何内容，div作为块级元素默认宽度为父容器的100%，但高度完全由内部内容撑开，空状态下高度为0，没有可视区域可以渲染背景图，因此显示空白。
• 同样的配置应用到body可以正常显示，是因为浏览器对html、body根标签有特殊渲染逻辑，默认会将其高度拉伸到匹配浏览器视口高度，有足够的可视区域渲染背景。

根据你的使用场景选择对应方案即可：

• 方案1：用视口单位直接设置div高度占满全屏，适配所有设备尺寸

.back {
    /* 新增宽高配置 */
    width: 100%;
    height: 100vh;
    /* 原有背景配置保持不变 */
    background-image: url(images/bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
}

• 方案2：先给根标签设置100%高度，再同步给div设置100%高度

/* 新增根标签高度配置 */
html, body {
    width: 100%;
    height: 100%;
}
.back {
    width: 100%;
    height: 100%;
    /* 原有背景配置保持不变 */
}

• 方案3：不需要全屏显示背景的场景下，可以给div设置固定高度，比如height: 600px;，或是在div内部添加文本、图片等内容把高度撑开。

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