Overlap "input text" over a image

Question

im trying to give a way that the user can give a tittle to a image and write over a image, so my viable solution is to have 2 textfield when the second one is update with the string we introduced in the first input.

Here is the code:

<form action="#" id="form_field">
    <input type="text" id="textfield1" value="" onChange="document.getElementById('textfield2').value=this.value">
    <input type="text" id="textfield2" value="">
</form>

Is there any form to insert that "input text" over a image? i will hide the box with css after that so its look like you can write something over a image.

score 1 · Accepted Answer · answered Oct 08 '14 at 11:54

You can use a input with position absolute.

Take a look: http://jsfiddle.net/x60cgyeh/2/

<form action="#" id="form_field">
    <input type="text" id="textfield2" value="" placeholder="Insert image title...">
    <img src="http://dummyimage.com/300/eee/aaa">
</form>

and CSS

#form_field {
    position:relative;
    width:300px;
}

#textfield2 {
    position:absolute;
    background:transparent;
    border:0;
    color:#000;
    font-size:20px;
    text-align:center;
    width:100%;
    top:20px;
    outline:none;
}

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

What browsers do you need this to work in? If it is just the modern ones you can set the size and background image of the input field itself.

See: html input with background image

edited May 23 '17 at 11:49

Community

1
1

answered Oct 08 '14 at 11:52

MarkP

481
7
20

score 0 · Answer 3 · answered Oct 08 '14 at 12:02

You can assign a background-image to the <form> tag using CSS like this: jsFiddle.

HTML:

<form action="#" id="form_field">
    <input type="text" id="textfield1" value="" onChange="document.getElementById('textfield2').value=this.value" placeholder="Enter Image Title">
    <input type="text" id="textfield2"  placeholder="Enter Image Description" value="">
</form>

CSS:

form#form_field {
    width: 600px;
    height: 359px;
    background-image: url(//bg image url)
}
form#form_field input {
    background: transparent;
    border: none;
    width: 100%;
    text-align: center;
    font-size: 25px;
    margin-top: 100px;
    color: white;
}
form#form_field input:focus {
    outline: none;
}

Overlap "input text" over a image

3 Answers3