
Since there is no access to the DOM is any other of way of changing a background based on a user selection. I had a look around for some way to do it with CSS but I did not find anything.
<div class='sheet-maindiv' style="width: 840px;"> <div class="sheet-useBackground"> <input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="1" checked /> <input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="2" /> <input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="3" /> <input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="4" /> <input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="5" /> <input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="6" /> <input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="7" /> <input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="8" /> <input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="9" /> <input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="10" /> <!-- Be sure to update the CSS with the file information) --> <div class='sheet-background'> <div class='sheet-cdiv'> <input class="sheet-HideConfig" type="checkbox" checked name="attr_is_config" /><span class="sheet-is-config"><span style='font-family:"Pictos";'>y</span></span> <!-- --> <!-- BEGIN CONFIGURATION STUFF --> <!-- --> <div class="sheet-config" style='border-style: dotted; border-color: #dbc792; padding: 5px; background-color: white; background-image: none;'> sheet version: 25 Apr 2016 <div class='sheet-row'><h2 class='sheet-sectionHeader'>CONFIGURATION</h2></div> <div class="sheet-row"> <div class="sheet-col"> <h3>Backgrounds</h3> <span class="sheet-5pxshim"> <input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="1" title="No Background Image" checked /> No Background Image<br /> <input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="7" title="Cyberpunk" /> Cyberpunk<br /> <input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="8" title="Hellfrost" /> Hellfrost<br /> <input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="9" title="Hellfrost: Land of Fire" /> Hellfrost: Land of Fire<br /> <input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="5" title="Last Parsec" /> Last Parsec<br /> <input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="4" title="Noir" /> Noir<br /> <input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="2" title="Old Map (PotSM)" /> Old Map<br /> <input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="10" title="Parchment" /> Parchment<br /> <input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="6" title="Supers" /> Superhero<br /> <input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="3" title="Zombiepocalypse" /> Zombie-esque<br /> </span> </div> </div> </div> </div> <!--Character Sheet stuff--> </div> </div> </div>
/*----------- Background Info -----------*/ .sheet-useBackground input[value="1"]:checked ~ *.sheet-background { background-image: none; background-color: white; /*background-image: url("http://www.geeksville.us/roll20/oldMap_seamless_2.png"); background-size: 845px 900px;*/ /*background-repeat: no-repeat;*/ /*background-attachment: fixed;*/ /*background-position: center; background-origin: content-box;*/ } .sheet-useBackground input[value="2"]:checked ~ *.sheet-background { background-image: url("http://www.geeksville.us/roll20/oldMap_seamless_2.png"); background-size: 845px 900px; /*background-repeat: no-repeat;*/ /*background-attachment: fixed;*/ background-position: center; background-origin: content-box; } .sheet-useBackground input[value="3"]:checked ~ *.sheet-background { background-image: url("http://www.geeksville.us/roll20/Z-background.jpg"); background-size: 845px 564px; /*background-repeat: no-repeat;*/ /*background-attachment: fixed;*/ background-position: center; background-origin: content-box; } .sheet-useBackground input[value="4"]:checked ~ *.sheet-background { /*background-image: url("http://www.geeksville.us/roll20/NYC-Night_2.jpg");*/ /*background-image: url("http://www.geeksville.us/roll20/noir3.jpg");*/ background-image: url("http://www.geeksville.us/roll20/NewNoir2.jpg"); background-size: 850px 920px; /*background-repeat: no-repeat;*/ /*background-attachment: fixed;*/ background-position: center; background-origin: content-box; } .sheet-useBackground input[value="5"]:checked ~ *.sheet-background { background-image: url("http://www.geeksville.us/roll20/LastParsec-Background.jpg"); background-size: 840px 1060px; /*background-repeat: no-repeat;*/ /*background-attachment: fixed;*/ background-position: center; background-origin: content-box; -webkit-border-image:url("http://www.geeksville.us/roll20/LastParsec-Border.png"); /* Safari 3.1-5 */ -o-border-image:url("http://www.geeksville.us/roll20/LastParsec-Border.png"); /*round; Opera 11-12.1 */ -moz-border-image:url("http://www.geeksville.us/roll20/LastParsec-Border.png"); border-image:url("http://www.geeksville.us/roll20/LastParsec-Border.png") 100 50; border-image-width: 20px; } .sheet-useBackground input[value="6"]:checked ~ *.sheet-background { background-image: url("http://www.geeksville.us/roll20/supers.jpg"); background-size: 840px 564px; /*background-repeat: no-repeat;*/ /*background-attachment: fixed;*/ background-position: center; background-origin: content-box; } .sheet-useBackground input[value="7"]:checked ~ *.sheet-background { /*background-image: url("http://www.geeksville.us/roll20/cyberpunk2.jpg");*/ background-image: url("http://www.geeksville.us/roll20/cyberpunk-2.5.jpg"); background-size: 840px 840px; /*background-repeat: no-repeat;*/ /*background-attachment: fixed;*/ background-position: center; background-origin: content-box; } .sheet-useBackground input[value="8"]:checked ~ *.sheet-background { /*Hellfrost*/ /*background-image: url("http://www.geeksville.us/roll20/cyberpunk2.jpg");*/ background-image: url("http://www.geeksville.us/roll20/Hellfrost_4.jpg"); background-size: 840px 840px; background-repeat: repeat; /*background-attachment: fixed;*/ background-position: center; background-origin: content-box; } .sheet-useBackground input[value="9"]:checked ~ *.sheet-background { /*Hellfrost: Land of Fire*/ background-image: url("http://www.geeksville.us/roll20/Hellfrost_LoF.jpg"); background-size: 840px 840px; background-repeat: repeat; /*background-attachment: fixed;*/ background-position: center; background-origin: content-box; } .sheet-useBackground input[value="10"]:checked ~ *.sheet-background { /*Hellfrost: Land of Fire*/ background-image: url("http://www.geeksville.us/roll20/lankhmar-bg-1.jpg"); background-size: 840 840px; background-repeat: repeat; /*background-attachment: fixed;*/ background-position: center; background-origin: content-box; } /*----------- End Background Info -----------*/There's some additional CSS that I didn't include to do the Configuration section...but this should put you on the track for the background thing.