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...  Here's the HTML:

<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>

And here's the CSS:

/*----------- 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.

Thanks I pulled it from github and took a look.  Wow did not know there was a css selector based on the value of a checkbox.  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  hidden div with the check boxes.  There is a bucket load of possible runes.  

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