[]如何实现聊天图文混排的聊天 气泡背景效果？

想实现这种图文混排的聊天效果，气泡随着聊天内容变化的圆角矩形
用的HTMLDivElement，但是style里不能设置background为图片啊，只能为color
在html里是这样写的
<span>右边</span>
    <div style="width:422px;">
        <img style= " display:inline;  float:right; " src="Face/img_duihua_qipao_green_01.png "></img>
        
        <div style="background:url(Face/img_duihua_qipao_green_02.png); height:100%; min-height:44px; width:400px;
        border-top-left-radius:20px;
        border-bottom-right-radius:20px;
        border-bottom-left-radius:20px;
        ">
        <span style="display:block;padding:20px; font-family:'SimHei'; font-size:30px; ">是飞洒地是飞洒地是飞洒地是飞洒地是飞洒地是飞洒地是飞洒地是飞洒地是飞洒地<img style= "height:45px; width:45px;" src="Face/image_touxiang.png ">说法是否</img>
        </span>
        
        </div>
        
    </div>
    <span>左边</span>
    <div>
        <img style= "display:inline; float:left;" src="Face/img_duihua_qipao_white_01.png "></img>
        <div style="background:url(Face/img_duihua_qipao_white_02.png); height:50px; width:100px;border-top-right-radius:20px;
        border-bottom-right-radius:20px;
        border-bottom-left-radius:20px; margin-left:22px">
        safasfasdfsdaf
        </div>
    </div>
 
请问还有其他好的实现方式吗?