How to adjust or resize the background image of div dynamically based on content size

How to adjust or resize the background image of div dynamically based on
content size

I am working on Html and Css. I am trying to design a chart conversation
like web page where i need to show the messages alternatively like one
comes right another on left similar in mobile applications. For that i am
using divs to contains the message and i set a background-image for it,

Here what the problem i am facing is, message are of variable size that
means some may occupy 1 line and some other might 5 to 20 lines we cannot
estimate it. Div background-image size is 40px height only so if i got
more than 3 lines of message then it crosses the background image. Here is
my Div markup
<div style="background-image:url('some
url');padding:10px;margin:2%;word-break:break-word;width:100px;max-width:10px">Here
is my content it is variable in size</div>
I have used the css properties like overflow:hidden but it didn't help me.
Is there any way so that image or div will be automatically resized based
on the content size vertically. Or other way i can follow that is closely
related to my requirement. Please guide me.