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.