CSS背景图片无法正常显示求助：大Div两端背景图不显示

问题根源 #

1. 浮动的.headl和.headr元素未设置高度，背景图无法在高度为0的容器中显示
2. justify-content是flex布局专属属性，当前元素未启用flex，该属性无效
3. .headr同时使用float: right和display: table-cell，属性冲突导致布局异常

方案1：使用Flex布局（推荐） #

Flex布局更稳定，能避免浮动带来的各种问题，修复后的CSS代码如下：

.headall {
    background-color: #44546a;
    display: flex;
    align-items: center;
}
.headl {
    width: 12%;
    display: flex;
    justify-content: flex-end;
    transform: scaleX(-1);
    background-image: url(./images/leaves.png);
    background-repeat: no-repeat;
    background-size: 130px;
    height: 130px; /* 与背景图尺寸匹配，确保容器有足够空间 */
}

.headctr {
    width: 76%;
    display: flex;
    justify-content: center;
}

.headr {
    width: 12%;
    display: flex;
    justify-content: flex-end;
    background-image: url(./images/leaves.png);
    background-repeat: no-repeat;
    background-size: 130px;
    height: 130px;
}

修改说明：

• 给父容器.headall设置display: flex，统一管理子元素布局
• 给.headl和.headr添加height属性，匹配背景图尺寸，让背景图有显示空间
• 给两个侧边容器设置display: flex，让justify-content生效，控制背景图的水平位置
• 移除冲突的float和display: table-cell属性，避免布局混乱

方案2：保留浮动布局 #

如果坚持使用浮动，需要解决高度塌陷和属性冲突问题，代码如下：

.headall {
    background-color: #44546a;
    overflow: hidden; /* 清除浮动，解决父容器高度塌陷 */
}
.headl {
    width: 12%;
    float: left;
    transform: scaleX(-1);
    background-image: url(./images/leaves.png);
    background-repeat: no-repeat;
    background-size: 130px;
    height: 130px;
    background-position: right center; /* 控制背景图靠右显示 */
}

.headctr {
    width: 76%;
    float: left; /* 改为浮动，消除inline-block默认间隙 */
    text-align: center;
    line-height: 130px; /* 与高度一致，实现内容垂直居中 */
}

.headr {
    width: 12%;
    float: right;
    background-image: url(./images/leaves.png);
    background-repeat: no-repeat;
    background-size: 130px;
    height: 130px;
    background-position: right center;
}

修改说明：

• 用overflow: hidden清除浮动，让父容器包裹住所有浮动子元素
• 给侧边容器设置高度，确保背景图能显示
• 用background-position替代无效的justify-content，控制背景图位置
• 将.headctr改为浮动，避免inline-block元素之间的默认空白间隙

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