Advanced Heroquest Character sheet problem

im really starting to bang my head to a wall with this one. no matter what i change there is always a white background on top of my character sheet and i cannot see the original background. also it seems that i cannot figure out how to make this fit perfect in to the game bcos for some reason the "see results" is not showing same as in the game. i have been changing the resolution and everything there and back, and those attribute boxes i have moved them several times to mach with the background that is not even showin g in the game bcos there is a blank white backroung on top of my sheet. now i´m almos ready to give up but still i wanna try and learn to make this better. if there is a good hearted pro that can take a look what is wrong with this and maybe adjust the size of this sheet better. i would really appresiate that. or atleast gimme a hint where im doing something wrong. so here is the HTML i have wrote &gt;&gt;-----&gt; (ye its kinda mess but there is some notes atleast) &lt;div class="sheet-background" style="position: relative; height: 1024px; width: 724px; top:0px; left: 0%;"&gt; &lt;!--name and race--&gt; &lt;div class="sheet-name" style="position: absolute; top: 341px; left: 150px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_character_name" style="width: 153px;" /&gt; &lt;/div&gt; &lt;div class="sheet-class" style="position: absolute; top: 371px; left: 150px;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_race" style="width: 145px;"/&gt; &lt;/div&gt; &lt;!--attributes--&gt; &lt;div class="sheet-row"&gt; &lt;div class="sheet-col" style="position: absolute; top: 85px; left: 110px;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_weaponskill" style="width: 28px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 85px; left: 200px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_weaponskill_current" style="width: 28px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 155px; left: 110px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_bowskill" style="width: 28px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 155px; left: 200px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_bowskill_current" style="width: 28px;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-row"&gt; &lt;div class="sheet-col" style="position: absolute; top: 220px; left: 110px;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_strength" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 220px; left: 200px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_strength_current" style="width: 28px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 285px; left: 110px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_toughness" style="width: 28px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 285px; left: 200px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_toughness" style="width: 28px;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-row"&gt; &lt;div class="sheet-col" style="position: absolute; top: 85px; left: 515px;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_speed" style="width: 28px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 85px; left: 600px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_speed_current" style="width: 28px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 155px; left: 515px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_bravery" style="width: 28px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 155px; left: 600px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_bravery_current" style="width: 28px;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-row"&gt; &lt;div class="sheet-col" style="position: absolute; top: 220px; left: 515px;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_intelligence" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 220px; left: 600px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_intelligence_current" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 285px; left: 515px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_fate" style="width: 28px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 285px; left: 600px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_fate_max" style="width: 28px;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 355px; left: 515px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_wounds" style="width: 28px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 355px; left: 600px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_wounds_max" style="width: 28px;"/&gt; &lt;/div&gt; &lt;!--hand-to-hand--&gt; &lt;div class="sheet-row"&gt; &lt;div class="sheet-col" style="position: absolute; top: 480px; left: 275px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="combat_hitroll1" style="width: 23px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 480px; left: 308px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="combat_hitroll2" style="width: 23px;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-row"&gt; &lt;div class="sheet-col" style="position: absolute; top: 480px; left: 340px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="combat_hitroll3" style="width: 23px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 480px; left: 372px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="combat_hitroll4" style="width: 23px;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-row"&gt; &lt;div class="sheet-col" style="position: absolute; top: 480px; left: 405px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="combat_hitroll5" style="width: 23px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 480px; left: 440px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="combat_hitroll6" style="width: 23px;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-row"&gt; &lt;div class="sheet-col" style="position: absolute; top: 480px; left: 472px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="combat_hitroll7" style="width: 23px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 480px; left: 505px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="combat_hitroll8" style="width: 23px;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-row"&gt; &lt;div class="sheet-col" style="position: absolute; top: 480px; left: 537px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="combat_hitroll9" style="width: 23px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 480px; left: 570px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="combat_hitroll10" style="width: 23px;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-row"&gt; &lt;div class="sheet-col" style="position: absolute; top: 480px; left: 604px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="combat_hitroll11" style="width: 23px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 480px; left: 636px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="combat_hitroll12" style="width: 23px;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--rangedcombat--&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 500px; left: 270px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="rangeroll1" style="width: 63px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 500px; left: 343px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="rangeroll2" style="width: 63px;"/&gt; &nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 500px; left: 416px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="rangeroll3" style="width: 63px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 500px; left: 489px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="rangeroll4" style="width: 63px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 500px; left: 559px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="rangeroll6" style="width: 63px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;!--weapons--&gt; &lt;div class="sheet-col"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_weapon1" style="position: absolute; top: 5450px; left: 194px; width: 140px; height: 10px;"/&gt; &nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_weapon2" style="position: absolute; top: 565px; left: 194px; width: 140px; height: 10px;"/&gt; &nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_weapon3" style="position: absolute; top: 585px; left: 194px; width: 140px; height: 10px;"/&gt; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 80px; top: 474px; left: 344px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_range1" style="width: 60px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 80px; top: 474px; left: 466px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_damdice1" style="width: 10px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 80px; top: 474px; left: 540px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_fumble1" style="width: 10px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 474px; left: 612px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_critical1" style="width: 10px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp;&lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 80px; top: 494px; left: 344px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_range2" style="width: 60px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 80px; top: 494px; left: 466px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_damdice2" style="width: 10px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 80px; top: 494px; left: 540px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_fumble2" style="width: 10px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 494px; left: 612px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_critical2" style="width: 10px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp;&nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 80px; top: 514px; left: 344px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_range3" style="width: 60px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 80px; top: 514px; left: 466px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_damdice3" style="width: 10px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 80px; top: 514px; left: 540px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_fumble3" style="width: 10px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 514px; left: 612px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_critical3" style="width: 10px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &lt;!--armour--&gt; &lt;div class="sheet-col"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_weapon1" style="position: absolute; top: 643px; left: 205px; width: 140px; height: 10px;"/&gt; &nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_weapon2" style="position: absolute; top: 673px; left: 205px; width: 140px; height: 10px;"/&gt; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 80px; top: 563px; left: 380px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_bowskill1" style="width: 50px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 583px; left: 380px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_bowskill2" style="width: 50px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 603px; left: 380px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_bowskilltotal" style="width: 50px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 80px; top: 563px; left: 464px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_damdice" style="width: 50px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 583px; left: 464px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_damdice2" style="width: 50px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 603px; left: 464px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_damdicetotal" style="width: 50px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 80px; top: 563px; left: 548px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_speed1" style="width: 50px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 583px; left: 548px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_speed2" style="width: 50px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;div class="sheet-col" style="position: absolute; width: 240px; top: 603px; left: 548px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="sheet_speedtotal" style="width: 50px; height: 10px;"/&gt; &nbsp; &lt;/div&gt; AND HERES the Css &gt;&gt;----&gt; .sheet-background { &nbsp;&nbsp; width: 724px; &nbsp;&nbsp; height: 1024px; } .sheet-background::after { &nbsp;&nbsp; content: ""; &nbsp;&nbsp; top: 0; &nbsp;&nbsp; left: 0; &nbsp;&nbsp; bottom: 0; &nbsp;&nbsp; right: 0; &nbsp;&nbsp; position: absolute; &nbsp;&nbsp; z-index: -1;&nbsp; &nbsp; &nbsp;&nbsp; background: url('<a href="https://angrygolem-games.com/wp-content/uploads/2019/11/Advanced-Heroquest-Character-Sheet-724x1024.jpg" rel="nofollow">https://angrygolem-games.com/wp-content/uploads/2019/11/Advanced-Heroquest-Character-Sheet-724x1024.jpg</a>'); &nbsp;&nbsp; background-size: 724px 1024px; }

Can you paste a screenshot of what you're seeing, and explain the problem? Here's what I see: There are some obvious issues there, but they are the sort of thing you might be working on. I can't see the problem you are describing though. By the way there are some obvious issues with your code - too many "&lt;/div&gt;" entries for example. If you aren't using a code editor and the custom sheet sandbox, you should be - this kind of thing is easily spotted very quickly. Using a Code Editor: <a href="https://cybersphere.me/use-a-code-editor/" rel="nofollow">https://cybersphere.me/use-a-code-editor/</a> You're also using a lot of inline styles when you should be using CSS.

PS: something you might find handy - you can cut that background image up in an external image program, and thus use only the parts you need. That way you dont have to line everything up to match the sheet, and use absolute positioning less. For instance, you could cut out the portrait and shield, and position them as an img element or background to properly sized div. Just erase those horizontal lines at the bottom. Also think about hwether those images actually have any use in an online character sheet. On the paper sheet they are there for people to draw in, but you can't do that on a roll20 sheet. The big oval could be used with the new technique to embed character portraits (would need to erase the character outline inside it), but the shield doesnt seem to serve any purpose, unless say you embed the character's token image there. There's a few ways you can replicate something like this: Personally I'd probably just create a vertical shaded bar in a paint program, and position it as background in the sheet, and everything else just use fonts and border with curved radius on a div to make the oval spaces for the attributes. This kind of thing gives you most flexibility - you can use the browser's own ability to lay out elements, without trying to force everything to fit a screeenshot with a specific height and width. You can also cope with characters who have more or less than 3 of any weapon or armour, and have a better organisation for those. Personally, I'd likely rearrange that whole bottom section, to better use the space and give equipment a lot more room (over on the right side, likely, with everything else pushed to the left). Those are tips to keep the basic layout of the sheet with some minor optimization. But remember, the demands of working on Roll20 are different from using a paper sheet - you don't have to slavishly follow the paper sheet. You can present the same information in a more compact form, in a better layout for use here.

Another PS: here's the CSS you need to get rid of the spinners (the up / down arrows) on those inputs: input [ type = number ] ::-webkit-outer-spin-button , input [ type = number ] ::-webkit-inner-spin-button { &nbsp; &nbsp; -webkit-appearance : none ; &nbsp; &nbsp; margin : 0 ; &nbsp; &nbsp; text-align : center ; } input [ type = number ] { &nbsp; &nbsp; -moz-appearance :textfield; &nbsp; &nbsp; text-align : center ; } You'll likely want to remove the input box border as well, with a css class (not inline style).

While looking at your CSS code, I wonder if I have found your problem. Have you gone from a legacy code sheet to a CSE sheet? In your two CSS declarations, try removing sheet- , and see if the image returns to normal. In other words, change these lines: .sheet-background { &nbsp; &nbsp; width : 724px ; &nbsp; &nbsp; height : 1024px ; } .sheet-background::after { To this: .background { &nbsp; &nbsp; width : 724px ; &nbsp; &nbsp; height : 1024px ; } .background::after { and see if that fixes your issue. PS: you don't need the ::after part - you can erase that, either way.

holy damnation! thank u for the hints and tips. i start working on these ^^ ty for your help!

well, now i have cleaned errors out of the way, and i got my resolution in place, but still the main problem exist. i can do all the rest later but now i wanna know how to fix this. so when i launch my game and i go into the character sheet.. only thing i see is those sheet boxes and WHITE BACKGROUND..? im wonderin why is this? i did replace that sheet-background with .backgound in html and both in the css code. this didnot fix my broplems it just made my background to disappear. (in game and in html testing page) so i placed and replaced .background with sheet-background&nbsp; now i see my background in testing area yet again and all looks nice,but in game all i can see is all white and boxes..?

html code &lt;div class="background" style="position: relative; height: 724px; width: 800px; top:0px; left: 0%;"&gt; &lt;!--name and race--&gt; &lt;div class="sheet-name" style="position: absolute; top: 235px; left: 185px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_character_name" style="width: 153px;" /&gt; &lt;/div&gt; &lt;div class="sheet-race" style="position: absolute; top: 260px; left: 185px;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_race" style="width: 153px;"/&gt; &lt;/div&gt; &lt;!--attributes--&gt; &lt;div class="sheet-row"&gt; &lt;div class="sheet-col" style="position: absolute; top: 60px; left: 120px;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_weaponskill" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 60px; left: 220px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_weaponskill_current" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 107px; left: 120px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_bowskill" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 107px; left: 220px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_bowskill_current" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 153px; left: 120px;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_strength" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 153px; left: 220px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_strength_current" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 198px; left: 120px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_toughness" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 198px; left: 220px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_toughness_current" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 60px; left: 570px;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_speed" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 60px; left: 665px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_speed_current" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 107px; left: 570px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_bravery" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 107px; left: 665px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_bravery_current" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 153px; left: 570px;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_intelligence" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 153px; left: 665px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_intelligence_current" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 198px; left: 570px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_fate" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 198px; left: 665px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_fate_max" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 247px; left: 570px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_wounds" style="width: 30px;"/&gt; &lt;/div&gt; &lt;div class="sheet-col" style="position: absolute; top: 247px; left: 665px;"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_wounds_max" style="width: 30px;"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--equipment--&gt; &lt;div class="sheet-col"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="text" name="info_weapon" style="position: absolute; top: 452px; left: 225px; width: 165px; height: 45px;"/&gt; &nbsp;&nbsp;&nbsp; &lt;input type="text" name="info_armour" style="position: absolute; top: 537px; left: 225px; width: 175px; height: 45px;"/&gt; &lt;/div&gt; &lt;/div&gt; css code is .sheet-background { &nbsp;&nbsp; width: 800px; &nbsp;&nbsp; height: 724px; } .sheet-background: { &nbsp;&nbsp; content: ""; &nbsp;&nbsp; top: 0; &nbsp;&nbsp; left: 0; &nbsp;&nbsp; bottom: 0; &nbsp;&nbsp; right: 0; &nbsp;&nbsp; position: absolute; &nbsp;&nbsp; z-index: -1;&nbsp; &nbsp; &nbsp;&nbsp; background: url('<a href="https://angrygolem-games.com/wp-content/uploads/2019/11/Advanced-Heroquest-Character-Sheet-724x1024.jpg" rel="nofollow">https://angrygolem-games.com/wp-content/uploads/2019/11/Advanced-Heroquest-Character-Sheet-724x1024.jpg</a>'); &nbsp;&nbsp; background-size: 800px 724px; }

i also tryied to make z-index: -1; to be 1 this actually made my background to show in game BUT then all my boxes was gone (in behind this background) heh. i just cannot figure it out now how i can make my boxes AND my background visible in game? (i tryied to take a screenshot but this page doesnow allow me to share it for some reason)

hm.. maybe the problem is not in the Html but it is in the game... i need to check out if there is some option that prevents me to see the whole character sheet.

Can you take a screenshot of what you're seeing? I am wondering if its a CSE/Legacy problem, and a screenshot of the character sheet would help a lot. Note: embedding screenshots can be flaky on roll20. What I usually do is upload the pic to imgur, then copy the url from there and paste it here.

<a href="https://imgur.com/Qj3Hljo" rel="nofollow">https://imgur.com/Qj3Hljo</a>

<a href="https://imgur.com/k19Toiq" rel="nofollow">https://imgur.com/k19Toiq</a>

would problem be solved if i copy the character sheet image from the url i took it on and place it in my imgur and use the url image from there?..

i´m sorry i don´t know what CSE/Legacy is, suppose it is somekinda copyright protection? what i did in the first place was i went in to github where i found character sheet to heroquest gameboard. there was some ready html and css. it was very simple code bcos heroquest is much simplier game than advanced heroquest is. there i took the ready code and made the changes. i think this code is ok now, and i cannot see anything else that is somehow connected to the background problem than this z-index: -1; but that should be right. All the rest of the code is just resolution or boxes and messages..?. i didn´t found any options that can turn on or off that character sheet either. so now i´m just stuck? sheet is blank white in game but it looks like ok in the html editor..? maybe it is this CSE/Legacy but how i fix this? i need to read about this and study.

now i tryied to exterminate all the sheet- that i found on my codes but it didn´t work at all. it just made by background to disappear yet again..

i read some info and found some hints. there was this piece of code for CSE sheet .charsheet h1 {styling;} but i tryied this and meh. nothing. i wonder why there is this "white background" in front of my advanced hero sheet picture in game but not in html code. but if i change z-index: -1; into z-index: 1; white background goes away and my advanced picture comes on top BUT then my attri boxes vanish in behind this advanced sheet picture.. How i can make that white background to go away?? i didn´t even made that in that piece of code.?.

You see at the very top of this screenshot, there is a legacy sanitization checkbox: With your original code (including the sheet- entries), do you still get the white sheet? I'd try rewriting your CSS from all of this: .sheet-background { &nbsp; &nbsp; width : 724px ; &nbsp; &nbsp; height : 1024px ; } .sheet-background ::after { &nbsp; &nbsp; content : "" ; &nbsp; &nbsp; top : 0 ; &nbsp; &nbsp; left : 0 ; &nbsp; &nbsp; bottom : 0 ; &nbsp; &nbsp; right : 0 ; &nbsp; &nbsp; position : absolute ; &nbsp; &nbsp; z-index : -1 ; &nbsp; &nbsp; &nbsp; background : url ( ' <a href="https://angrygolem-games.com/wp-content/uploads/2019/11/Advanced-Heroquest-Character-Sheet-724x1024.jpg" rel="nofollow">https://angrygolem-games.com/wp-content/uploads/2019/11/Advanced-Heroquest-Character-Sheet-724x1024.jpg</a> ' ); &nbsp; &nbsp; background-size : 724px 1024px ; } to this: .sheet-background { &nbsp; &nbsp; background : url ( ' <a href="https://angrygolem-games.com/wp-content/uploads/2019/11/Advanced-Heroquest-Character-Sheet-724x1024.jpg" rel="nofollow">https://angrygolem-games.com/wp-content/uploads/2019/11/Advanced-Heroquest-Character-Sheet-724x1024.jpg</a> ' ); &nbsp; &nbsp; background-size : 724px 1024px ; } You don't need an absolute position or z-index, and certainly don't need to set content to "" on a standard background.

i will give it a try. thank you for helping me out. ^^

This actually fixed all the problems! ty so much ^^

That's great!