Help please with placing text ontop of an image..

&nbsp; i would like to place an input value inside the semicircle,&nbsp; i have tried using &lt;table&gt; and 'cutting' the image up, placing the &lt;input&gt; in the middle..... i have a huge gap!..&nbsp; for no reason! any idea please... thanks &lt;table&gt; &lt;tr&gt;&lt;td colspan="3"&gt;&lt;img src='<a href="https://i.imgur.com/DDjVTd0.png'&gt;&lt;/img&gt;&lt;/td&gt;&lt;/tr" rel="nofollow">https://i.imgur.com/DDjVTd0.png'&gt;&lt;/img&gt;&lt;/td&gt;&lt;/tr</a>&gt; &lt;tr&gt; &lt;td&gt;&lt;img src='<a href="https://i.imgur.com/U2SQSTX.png'&gt;&lt;/img&gt;&lt;/td" rel="nofollow">https://i.imgur.com/U2SQSTX.png'&gt;&lt;/img&gt;&lt;/td</a>&gt; &lt;td style="width: 158px"&gt;&lt;input type="number" name="attr_B-rage" min="0" max="7" value="0" style="font-size: 18px; width 60px; text-align: center"&gt;&lt;/td&gt; &lt;td&gt;&lt;img src='<a href="https://i.imgur.com/cp3NxLv.png'&gt;&lt;/img&gt;&lt;/td" rel="nofollow">https://i.imgur.com/cp3NxLv.png'&gt;&lt;/img&gt;&lt;/td</a>&gt; &lt;/tr&gt; &lt;tr&gt;&lt;td colspan="3"&gt;&lt;img src=' ' name="attr_Beserk-stance"&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;select name="attr_Beserk-stance"&gt; &lt;option value=""&gt;CHANGE STANCE&lt;/option&gt; &lt;option value="<a href="https://i.imgur.com/4ci9SdX.png&quot;&gt;Blood" rel="nofollow">https://i.imgur.com/4ci9SdX.png"&gt;Blood</a> Rage&lt;/option&gt; &lt;option value="<a href="https://i.imgur.com/Y8THZcq.png&quot;&gt;Reckless&lt;/option" rel="nofollow">https://i.imgur.com/Y8THZcq.png"&gt;Reckless&lt;/option</a>&gt; &lt;option value="<a href="https://i.imgur.com/81EJVNk.png&quot;&gt;Provoke&lt;/option" rel="nofollow">https://i.imgur.com/81EJVNk.png"&gt;Provoke&lt;/option</a>&gt; &lt;/select&gt;

My answer here is going to assume that you intend to release this sheet to the public via the Roll20 repo so it can be selected as the sheet for new games by anyone. I'd highly recommend not &nbsp;using a single image as the background for the entire sheet like that. This method makes the sheet extremely static and impossible to make as a responsive web app. But the bigger problem is that a static image like this will have no real way of handling dynamic elements like repeating sections that can have any number of elements in them. Additionally, using tables for layout automatically prevents your code from being eligible for submission to the character sheet repository. My recommendation would be to extract specific elements of the sheet image for use in your sheet. For example, grab an image of the background of the attribute headers and an image of the circles. Clean the blue background out of these, and then save them as pngs. Then you can use these as backgrounds for those specific elements and use CSS grid and/or CSS flexbox to lay them out on the sheet. GiGs has some great blog posts on how to layout sheets .

i solved it ...