CSS +不同大小的文本区域以适合图像

Question

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

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

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

我也尝试将图像用作CSS背景，但发现它没有拉伸以适应文本。还尝试了浮动和绝对定位。

非常感谢任何帮助。

THX

    <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

为什么不使用一些CSS而不是图像？ CSS3圆角：

.chatMessengerChatBubblePinkWrapper {
    background:#fff8f2;
    border:1px solid #ffeadb;
    -webkit-border-radius: 5px;
    border-radius:5px;
}

Answer 2

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>