Changing a background image based on a drop down selection

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.

Yes, you can do it using CSS and radio buttons. If you want, you can take a look at the Savage Worlds (Tabbed) sheet, or I will paste the relevant code when I get home and have access to everything. :)

I just discovered something with radio buttons but I will take a look at the SW sheet.

Actually, I found I had the stuff with me... &nbsp;Here's the HTML: &lt;div class='sheet-maindiv' style="width: 840px;"&gt; &lt;div class="sheet-useBackground"&gt; &lt;input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="1" checked /&gt; &lt;input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="2" /&gt; &lt;input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="3" /&gt; &lt;input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="4" /&gt; &lt;input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="5" /&gt; &lt;input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="6" /&gt; &lt;input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="7" /&gt; &lt;input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="8" /&gt; &lt;input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="9" /&gt; &lt;input type="radio" class="sheet-useBackground" style="display: none;" name="attr_background" value="10" /&gt; &lt;!-- Be sure to update the CSS with the file information) --&gt; &lt;div class='sheet-background'&gt; &lt;div class='sheet-cdiv'&gt; &lt;input class="sheet-HideConfig" type="checkbox" checked name="attr_is_config" /&gt;&lt;span class="sheet-is-config"&gt;&lt;span style='font-family:"Pictos";'&gt;y&lt;/span&gt;&lt;/span&gt; &lt;!-- &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --&gt; &lt;!-- BEGIN CONFIGURATION STUFF --&gt; &lt;!-- &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; --&gt; &lt;div class="sheet-config" style='border-style: dotted; border-color: #dbc792; padding: 5px; background-color: white; background-image: none;'&gt; sheet version: 25 Apr 2016 &lt;div class='sheet-row'&gt;&lt;h2 class='sheet-sectionHeader'&gt;CONFIGURATION&lt;/h2&gt;&lt;/div&gt; &lt;div class="sheet-row"&gt; &lt;div class="sheet-col"&gt; &lt;h3&gt;Backgrounds&lt;/h3&gt; &lt;span class="sheet-5pxshim"&gt; &lt;input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="1" title="No Background Image" checked /&gt; No Background Image&lt;br /&gt; &lt;input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="7" title="Cyberpunk" /&gt; Cyberpunk&lt;br /&gt; &lt;input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="8" title="Hellfrost" /&gt; Hellfrost&lt;br /&gt; &lt;input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="9" title="Hellfrost: Land of Fire" /&gt; Hellfrost: Land of Fire&lt;br /&gt; &lt;input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="5" title="Last Parsec" /&gt; Last Parsec&lt;br /&gt; &lt;input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="4" title="Noir" /&gt; Noir&lt;br /&gt; &lt;input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="2" title="Old Map (PotSM)" /&gt; Old Map&lt;br /&gt; &lt;input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="10" title="Parchment" /&gt; Parchment&lt;br /&gt; &lt;input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="6" title="Supers" /&gt; Superhero&lt;br /&gt; &lt;input type="checkbox" class="sheet-useBackground" style="width: 15px;" name="attr_background" value="3" title="Zombiepocalypse" /&gt; Zombie-esque&lt;br /&gt; &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--Character Sheet stuff--&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; And here's the CSS: /*----------- Background Info -----------*/ .sheet-useBackground input[value="1"]:checked ~ *.sheet-background { background-image: none; background-color: white; /*background-image: url("<a href="http://www.geeksville.us/roll20/oldMap_seamless_2.png" rel="nofollow">http://www.geeksville.us/roll20/oldMap_seamless_2.png</a>"); background-size: 845px 900px;*/ &nbsp; &nbsp; /*background-repeat: no-repeat;*/ &nbsp; &nbsp; /*background-attachment: fixed;*/ &nbsp; &nbsp; /*background-position: center;&nbsp; &nbsp; &nbsp; background-origin: content-box;*/ } .sheet-useBackground input[value="2"]:checked ~ *.sheet-background { background-image: url("<a href="http://www.geeksville.us/roll20/oldMap_seamless_2.png" rel="nofollow">http://www.geeksville.us/roll20/oldMap_seamless_2.png</a>"); background-size: 845px 900px; &nbsp; &nbsp; /*background-repeat: no-repeat;*/ &nbsp; &nbsp; /*background-attachment: fixed;*/ &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; background-origin: content-box; } .sheet-useBackground input[value="3"]:checked ~ *.sheet-background { background-image: url("<a href="http://www.geeksville.us/roll20/Z-background.jpg" rel="nofollow">http://www.geeksville.us/roll20/Z-background.jpg</a>"); background-size: 845px 564px; &nbsp; &nbsp; /*background-repeat: no-repeat;*/ &nbsp; &nbsp; /*background-attachment: fixed;*/ &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; background-origin: content-box; } .sheet-useBackground input[value="4"]:checked ~ *.sheet-background { /*background-image: url("<a href="http://www.geeksville.us/roll20/NYC-Night_2.jpg&quot;);*/" rel="nofollow">http://www.geeksville.us/roll20/NYC-Night_2.jpg");*/</a> /*background-image: url("<a href="http://www.geeksville.us/roll20/noir3.jpg&quot;);*/" rel="nofollow">http://www.geeksville.us/roll20/noir3.jpg");*/</a> background-image: url("<a href="http://www.geeksville.us/roll20/NewNoir2.jpg" rel="nofollow">http://www.geeksville.us/roll20/NewNoir2.jpg</a>"); background-size: 850px 920px; &nbsp; &nbsp; /*background-repeat: no-repeat;*/ &nbsp; &nbsp; /*background-attachment: fixed;*/ &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; background-origin: content-box; } .sheet-useBackground input[value="5"]:checked ~ *.sheet-background { background-image: url("<a href="http://www.geeksville.us/roll20/LastParsec-Background.jpg" rel="nofollow">http://www.geeksville.us/roll20/LastParsec-Background.jpg</a>"); background-size: 840px 1060px; &nbsp; &nbsp; /*background-repeat: no-repeat;*/ &nbsp; &nbsp; /*background-attachment: fixed;*/ &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; background-origin: content-box; &nbsp; &nbsp; -webkit-border-image:url("<a href="http://www.geeksville.us/roll20/LastParsec-Border.png" rel="nofollow">http://www.geeksville.us/roll20/LastParsec-Border.png</a>"); /* &nbsp;Safari 3.1-5 */ &nbsp; &nbsp; -o-border-image:url("<a href="http://www.geeksville.us/roll20/LastParsec-Border.png" rel="nofollow">http://www.geeksville.us/roll20/LastParsec-Border.png</a>"); /*round; Opera 11-12.1 */ &nbsp; &nbsp; -moz-border-image:url("<a href="http://www.geeksville.us/roll20/LastParsec-Border.png" rel="nofollow">http://www.geeksville.us/roll20/LastParsec-Border.png</a>"); &nbsp; &nbsp; border-image:url("<a href="http://www.geeksville.us/roll20/LastParsec-Border.png" rel="nofollow">http://www.geeksville.us/roll20/LastParsec-Border.png</a>") 100 50; &nbsp; &nbsp; border-image-width: 20px; } .sheet-useBackground input[value="6"]:checked ~ *.sheet-background { background-image: url("<a href="http://www.geeksville.us/roll20/supers.jpg" rel="nofollow">http://www.geeksville.us/roll20/supers.jpg</a>"); background-size: 840px 564px; &nbsp; &nbsp; /*background-repeat: no-repeat;*/ &nbsp; &nbsp; /*background-attachment: fixed;*/ &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; background-origin: content-box; } .sheet-useBackground input[value="7"]:checked ~ *.sheet-background { /*background-image: url("<a href="http://www.geeksville.us/roll20/cyberpunk2.jpg&quot;);*/" rel="nofollow">http://www.geeksville.us/roll20/cyberpunk2.jpg");*/</a> background-image: url("<a href="http://www.geeksville.us/roll20/cyberpunk-2.5.jpg" rel="nofollow">http://www.geeksville.us/roll20/cyberpunk-2.5.jpg</a>"); background-size: 840px 840px; &nbsp; &nbsp; /*background-repeat: no-repeat;*/ &nbsp; &nbsp; /*background-attachment: fixed;*/ &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; background-origin: content-box; } .sheet-useBackground input[value="8"]:checked ~ *.sheet-background { /*Hellfrost*/ /*background-image: url("<a href="http://www.geeksville.us/roll20/cyberpunk2.jpg&quot;);*/" rel="nofollow">http://www.geeksville.us/roll20/cyberpunk2.jpg");*/</a> background-image: url("<a href="http://www.geeksville.us/roll20/Hellfrost_4.jpg" rel="nofollow">http://www.geeksville.us/roll20/Hellfrost_4.jpg</a>"); background-size: 840px 840px; &nbsp; &nbsp; background-repeat: repeat; &nbsp; &nbsp; /*background-attachment: fixed;*/ &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; background-origin: content-box; } .sheet-useBackground input[value="9"]:checked ~ *.sheet-background { /*Hellfrost: Land of Fire*/ background-image: url("<a href="http://www.geeksville.us/roll20/Hellfrost_LoF.jpg" rel="nofollow">http://www.geeksville.us/roll20/Hellfrost_LoF.jpg</a>"); background-size: 840px 840px; &nbsp; &nbsp; background-repeat: repeat; &nbsp; &nbsp; /*background-attachment: fixed;*/ &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; background-origin: content-box; } .sheet-useBackground input[value="10"]:checked ~ *.sheet-background { /*Hellfrost: Land of Fire*/ background-image: url("<a href="http://www.geeksville.us/roll20/lankhmar-bg-1.jpg" rel="nofollow">http://www.geeksville.us/roll20/lankhmar-bg-1.jpg</a>"); background-size: 840 840px; &nbsp; &nbsp; background-repeat: repeat; &nbsp; &nbsp; /*background-attachment: fixed;*/ &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; 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.

Thanks I pulled it from github and took a look. &nbsp;Wow did not know there was a css selector based on the value of a checkbox. &nbsp;I found some code for an image carousel which would look a lot neater but it would take a lot longer to select a rune. I was thinking of doing a sheet for Heroquest Glorantha and there needs to some way of selecting and displaying the runes. I guess the easiest way I guess is the &nbsp;hidden div with the check boxes. &nbsp;There is a bucket load of possible runes. &nbsp;

What an idiot I just spent two hours trying to get this to work outside roll20. &nbsp;It works inside roll20 because of roll20 attributes duh.