html - CSS + 不同大小的文本区域以适应图像

Question

http://jsfiddle.net/adamadam123/qv2yR/

以上是我目前正在使用的代码。下面是我要实现的目标的图片。

它基本上是一个聊天框“IM”，我有一个蓝色和粉红色的图像，需要能够在图像中放置不同数量的文本。

我也尝试过使用图像作为 CSS 背景，但发现它无法拉伸(stretch)以适合文本。还尝试了 float 和绝对定位。

如有任何帮助，我们将不胜感激。

谢谢

    <div class="chatMessengerBody">

        <div class="chatMessengerChatBubble chatMessengerChatBubbleBlueWrapper">
            <img src="images/chat-messenger-chat-bubble-blue.png" class="chatMessengerChatBubble chatMessengerChatBubbleBlue"/>
            <p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
            Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
            Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
            </p>
        </div>

        <div class="chatMessengerChatBubble chatMessengerChatBubblePinkWrapper">
            <img src="images/chat-messenger-chat-bubble-pink.png" class="chatMessengerChatBubble chatMessengerChatBubblePink"/>
            <p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?</p>
        </div>

    </div>

Answer 1

http://jsfiddle.net/qv2yR/10/

CSS

.blue {
    background: #EBF7FF;
    border: 1px solid #D4F1FD;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color :#6B95B0;
    margin-bottom: 5px;
    padding: 5px;    
    width: 200px;
}

.pink {
    background: #FFF8F2;
    border: 1px solid #FFEEE4;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color :#D386A8;
    margin-bottom: 5px;
    padding: 5px;    
    width: 200px;
}

HTML

<div class="blue">
 this is the blue one
</div>

<div class="pink">
    this is the pink one.
</div>