How to put html input text into an image using CSS?

Tags: html,css,image

Problem :

I have an image like this:

How can I insert some input fields into the image?

It should be possible that the user click into the input fields (green boxes) of the image and enter some values?

---

Solution :

Create div element with the dimensions of your image and set it's css position to relative. Then set the image's position as absolute and its coordinates 0,0. Then you can position all the checkboxes by absolute positioning as well.

By assuring that the wrapping div has position: relative;, you can position the checkboxes (and the image) from the border of the div.

HTML

<div id="wrapper">
  <img src="...">
  <input type="checkbox" style="position: absolute; top: 20px; left: 100px;">
  <input type="checkbox" style="position: absolute; top: 50px; left: 200px;">
</div>

CSS

div#wrapper {
  position: relative;
  width: 400px;
  height: 200px;
}

img {
  position: absolute;
  top: 0;  
  left: 0;
}