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


Tags: html,css,image

Problem :

I have an image like this:

enter image description here

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;
}

    CSS Howto..

    How do I align this icon while having the input take 100% width?

    how is the search mail button implemented?

    Contact page Design how to add Bootstrap

    JQM, CSS: How to change disabled fields css?

    How to Hide Specific Part of Flash Object Using CSS?

    Jquery: how to get menu to expand towards the right instead of the left

    how to change the div background image in mouse over [duplicate]

    How to add a background image or theme through CSS?

    How to center two elements which are separately wrapped in ?

    How to make a custom select option menu style without image in CSS?

    How to make a circular button out of a PNG image?

    How do I remove the white spaces around my dashboard header on reactjs

    background-image on divs aren't showing; the divs are collapsing instead

    CSS - how to dry up?

    How do I force span elements to remain in place between variable length text and an image element?

    How to center CSS Navigation Menu

    How do I prevent my dropdown from closing when clicking inside it?

    How to Align all inputs in a Form

    How to have this horizontal CSS based navigation menu work properly?

    How to get Angular Material Design's directive to scale to image properly in IE?

    How to keep CSS class on menu item with dropdown

    How to save css stylesheet pointer on php session?

    How to set -fx-max-width to USE_PREF_SIZE in JavaFX css?

    How do you achieve this backwards div effect? [closed]

    How to use a custom image for cursor/thumb in html input type range

    How to fetch the background of DIV on a bottom layer with exact position using jQuery and CSS

    How to include several nested CSS classes into rails .erb file?

    How to display text left side and icon on right side in html css?

    Image, src, href in same span. How to locate? Webdriver, css locator

    How to use min-width for “float:right” element in CSS?