动态添加内容时聊天窗口背景图消失、不重复的问题求助

问题根因 #

当前背景通过.pushy-whatsapp-body:before绝对定位伪元素实现，伪元素的height: 100%仅匹配聊天框初始加载时的可视高度。点击「订单状态」加载新内容后，聊天框容器的滚动高度变大，绝对定位的伪元素不会自动延伸到新增内容区域，因此出现下半部分背景消失的问题。设置高度为1000%属于强制拉长伪元素的临时方案，自然会引发滚动定位异常。

最优解决方案 #

直接将背景图挂载到聊天框容器本身，通过渐变叠加实现半透明效果，无需使用伪元素，背景会自动适配容器动态变化的高度：

1. 移除原有.pushy-whatsapp-body:before的全部样式
2. 给.pushy-whatsapp-body添加如下样式：

.pushy-whatsapp-body {
    /* 保留该元素原有其他样式，仅新增以下背景相关属性 */
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url(https://cdn.shopify.com/s/files/1/0033/3538/9233/files/whatsapp99.png?v=1623221870);
    background-size: cover;
    background-repeat: repeat;
}

备用方案（需要保留伪元素的场景） #

如果必须保留伪元素实现逻辑，修改两处样式即可：

1. 给父容器添加相对定位：

.pushy-whatsapp-body {
    position: relative;
    /* 保留其他原有样式 */
}

2. 修改伪元素样式，适配动态高度：

.pushy-whatsapp-body:before {
    display: block;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    /* 移除原有height:100%、width:100%属性，新增bottom:0适配滚动高度 */
    bottom: 0;
    z-index: 0;
    opacity: .08;
    background-image: url(https://cdn.shopify.com/s/files/1/0033/3538/9233/files/whatsapp99.png?v=1623221870);
    background-size: cover;
    background-repeat: repeat;
}

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