Question

How do I put centered textboxes inside each of the colored boxes in the image below?

Update: As requested, I’m adding my embarrassing attempt. I know it’s bad, but I don’t do design so I am kind of lost.

p.s. thanks for the down votes!

http://jsfiddle.net/Zrhe3/

table{width: 585px; height: 585px; background-image: url('https://i.stack.imgur.com/uknk9.png');} 
input{background-color: transparent; width: 100%; border-style:none; font-size: 32px;}

<table>
    <tr>
        <td></td>
        <td valign="bottom" align="center"><input type="number" id="number" value="1" /></td>
        <td></td>
    </tr>
    <tr>
        <td align="right"><input type="number" id="number"  value="2" /></td>
        <td></td>
        <td align="left"><input type="number" id="number" value="3" /></td>
    </tr>
    <tr>
        <td></td>
        <td valign="top" align="center"><input type="number" id="number" value="4" /></td>
        <td></td>
    </tr>
</table>​

Answer 1

You can find a solution over here http://jsfiddle.net/ZC2bd/46/ but I’m sure you haven’t looked for enough 😉 google is your friend

HTML:

<div id="background">
  <input id="top" type="text" />
  <input id="left" type="text" />
  <input id="right" type="text" />
  <input id="bottom" type="text" />
</div>

CSS:

div#background{
    display: block;
    width: 597px;
    height: 597px;
    background-image: url('https://i.stack.imgur.com/uknk9.png');
}
#top{
    width: 150px;
    height: 25px;
    position: absolute;
    margin: 135px 0 0 224px;
}
#left{
    width: 150px;
    height: 25px;
    position: absolute;
    margin: 290px 0 0 70px;
}
#right{
    width: 150px;
    height: 25px;
    position: absolute;
    margin: 290px 0 0 380px;
}
#bottom{
    width: 150px;
    height: 25px;
    position: absolute;
    margin: 435px 0 0 230px;
}​

Concerning the HTML part it’s pretty explicit, there is one container which contains four inputs.

In the CSS file, I’ve set your image in background of my container with fixed width and height.
Then I’ve created four id’s for the inputs all with the property position set to absolute.

The absolute attribute allows you to set the position of an element taking as reference the parent element, here the <div id="background">.
So since you know its size you can position your elements with the margin prooperty.

Hope it helps.