Html 文本图像中的区域

我需要创建一些东西，使手机的轮廓覆盖

文本区域

这是当前代码，我当前的代码是：

CSS:

HTML:

---

您可以将图像作为包装的背景

div

，只需将

textarea

放置在该包装内，并留有边距：

.wrap{
背景：url（'http://i.imgur.com/S66oEHW.png")不重复;；
背景尺寸：包含；
高度：500px；
最小宽度：300px；
}
.换行文本区域{
利润率：75px053px；
宽度：183px；
高度：350px；
}

试着在你的描述中留下一个js提琴或其他东西，以更好地掩盖你的问题为什么不将图像放在文本框后面？

div.sms{
    position: absolute;
    top:0;
    left:0
    z-index:99;
}

div.sms img{
    width: 300px;
    height: 510px;
}

div.sms textarea{
    position: absolute;
}

<div class="row">
   <div class="col-md-6 sms">
       <img src="http://i.imgur.com/S66oEHW.png"/>
       <textarea rows="4"></textarea> 
    </div>
</div>