Help coding Character Sheets that use stats placed over pictures (Eg a Body Image with Head/Arm/Torso/Leg armor & stats boxes)

I'd like to try and add some images to my character sheets (Peoples outlines, vehicle images like Car/Bike/etc), with statistics next to various locations - Like the Head has Helmet & Googles/Visor items locations & Head HP box. I was wondering if there any advice or example code on how other people have attempted this? I am guessing I have try to upload specific images & use div lines, percentages/pixels to move boxes about those images to make it work for each one. It would be cool if I could specify something to appear at X pixels height & Y pixels across the image. Or maybe someone has a better method? Also, can anyone offer advice on the code to set an image beneath/behind these text & input boxes? Or vice versa, the code to put a text or inpt box over an image? I'm still pretty new to Roll20 sheets... ^^' I'll find it in the wiki eventually I'm sure - but I've set myself one hell of a sheet to try and create so I'll eat my humble pie and ask for help before I get too lost and distracted with all the other cool coding you can try to build in... I'm aiming for something like this D&D sheet:

I'm no pro with HTML & CSS, but I would imagine using a combination of grid layout and position: absolute would be a place to start (grid is optional but I'd recommend it). If you don't need anything except the image on the back layer, you can just use the background-image CSS property on your outer <div>, and build a sheet as per usual. So for the above D&D image, I'd probably approach it something like this (I've simplified it into 3 columns, which isn't quite accurate to the above and would need some tweaking): The rough HTML: < div   class = "outer-container" >      < div   class = "grid-column left" >          < div   class = "floating-attribute head" >              < span > Head Slot:  </ span >              < input   type = "text"   name = "attr_inventory_head"/ >          </ div >          < div   class = "floating-attribute shoulder" >              < span > Shoulder Slot:  </ span >              < input   type = "text"   name = "attr_inventory_shoulder"/ >          </ div >          <!-- Left column attributes continue....... -->      </ div >      < div   class = "grid-column center" >          <!-- Center column attributes -->      </ div >      < div   class = "grid-column right" >          <!-- Right column attributes -->      </ div > </ div > and bare-bones CSS: .outer-container  {      background-image :  url ( 'silhouetteGuy.jpg' );      display :  grid ;  /* Split the attributes into 3 even columns */      grid-template-columns :  auto   auto   auto ; } .grid-column  {      position :  relative ;  /* This is needed for the 'position: absolute' child to anchor to */ } .floating-attribute  {      position :  absolute ;  /* This allows you to easily position the elements with the top & left properties */ } .floating-attribute.head  {  /* Each attribute will need at least the 'top' property set to position it correctly over the image */      top :  15% ; } .floating-attribute.face ,  /* If you have two attributes in different columns sharing the same vertical offset, you can combine them */ .floating-attribute.elbow  {      top :  25% ; } One of the proper sheet gurus may have a much better way of doing it though! If you do use position: absolute, don't forget to put a position: relative on the element you want to position it off, otherwise it'll keep traveling up the DOM until it finds a relative ancestor, and your "left: 0%" could give you some wild behaviour.

So its taken me 5 days to understand this, but I now successfully have silhouettes with stat overlays. I really spent most of that time learning the ins & outs of Roll20, Sheetworkers & Javascript. Once I got around that, I could really wrap my head around this and get it from A to Character Sheet :) But thank you so much - your code example led me through all the right thought processes to get it working. Now all I need to do is arrange the layout for half a dozen different images... And yes, I'm being a good soul & making my own silhouettes so I don't get into trouble with copyright. Honestly, now I get it coding it is *WAY* easier than figuring out how to make the layout work without spilling over areas... ^_^