CODEWITHSUNDEEP
htmlcssimagetextarea
Robert Crous
Robert Crous

Reputation: 341

Textarea inside an image

I need to create something where the outline of a phone covers a textarea.

This is the img source and my current code is:

CSS:

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

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

div.sms textarea{
    position: absolute;
}

HTML:

<div class="row">
   <div class="col-md-6 sms">
       <img src="https://i.sstatic.net/n5Ksf.png"/>
       <textarea rows="4"></textarea> 
    </div>
</div>

Upvotes: 1

Views: 1445

Answers (1)

web-tiki
web-tiki

Reputation: 103780

You could place the image as background of a wrapper div and simply position the textarea inside that wrapper with margins :

DEMO

.wrap{
    background: url('http://i.imgur.com/S66oEHW.png') no-repeat;
    background-size: contain;
    height:500px;
    min-width:300px;
}
.wrap textarea{
    margin:75px 0 0 53px;
    width:183px;
    height:350px;
}
<div class="wrap">
    <textarea></textarea>
</div>

Upvotes: 2

Related Questions