web: How can I place an input box in a picture?

I want to use a picture as my website design. It's a plain one, like google's.

<img src... done... >

now, I want to place an input box at the text area of the picture,开发者_开发技巧 how to I do that?

The best approach IMHO would be to have a <div> with that image as a background and one <input> child positioned using margins, or absolute positioning, like this:

<div style="background: url(img/background.jpg) no-repeat;">
  <input type="text" name="whatever" style="margin-left: 20px; margin-top: 40px;" />
</div>

This is not necessarily a good design.

To implement it, you need to use CSS.

You should make a large container <div> and apply the following rules:

div.Container {
    background: url('image');
    width: 300px;
    height: 200px;
    position: relative;
}
div.Container input#MyTextBox {
    position: absolute;
    left: 100px;
    top: 150px;
}