<select name="attr_background"> <option value="1">Sky</option> <option value="2">Captain</option> <option value="3">13</option> <option value="4">Honey</option> <option value="5">Badger</option> </select> <div class="sheet-example-content"> <input type="radio" value="1" name="attr_background" class="sheet-background sheet-background-1"> <input type="radio" value="2" name="attr_background" class="sheet-background sheet-background-2"> <input type="radio" value="3" name="attr_background" class="sheet-background sheet-background-3"> <input type="radio" value="4" name="attr_background" class="sheet-background sheet-background-4"> <input type="radio" value="5" name="attr_background" class="sheet-background sheet-background-5"> <img class="sheet-background sheet-background-1" src="<a href="http://example.com/images/sky-background.jpg" rel="nofollow">http://example.com/images/sky-background.jpg</a>"> <img class="sheet-background sheet-background-2" src="<a href="http://example.com/images/captain-background.jpg" rel="nofollow">http://example.com/images/captain-background.jpg</a>"> <img class="sheet-background sheet-background-3" src="<a href="http://example.com/images/13-background.jpg" rel="nofollow">http://example.com/images/13-background.jpg</a>"> <img class="sheet-background sheet-background-4" src="<a href="http://example.com/images/honey-background.jpg" rel="nofollow">http://example.com/images/honey-background.jpg</a>"> <img class="sheet-background sheet-background-5" src="<a href="http://example.com/images/badger-background.jpg" rel="nofollow">http://example.com/images/badger-background.jpg</a>"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt magna vitae mauris porttitor, a pulvinar
diam rutrum. Ut accumsan tempus eros, ac interdum nulla sollicitudin ac. In id urna odio. Sed volutpat molestie magna ac consequat. Vivamus iaculis ligula est, et fermentum felis consectetur nec. Nulla iaculis volutpat ligula eu blandit. Morbi et viverra diam, sit amet tristique leo. Nullam imperdiet elit nisi, vitae tempor risus euismod sit amet. Suspendisse pellentesque ultricies turpis, in tincidunt magna hendrerit eget. Fusce sit amet tellus id dolor accumsan ultrices in vel velit. Sed diam quam, maximus id tellus in, finibus porta ligula. Quisque a condimentum nisi. Morbi suscipit neque id dui ornare blandit.</p>
<p>Fusce at ex at elit rutrum scelerisque. Sed sollicitudin, libero a tristique pretium, lorem magna fermentum mauris, eget gravida augue tellus ac massa. Phasellus ultrices odio turpis, nec placerat eros aliquam sed. Cras dictum euismod erat, quis interdum quam. Etiam tristique, ligula eu vulputate pharetra, libero metus viverra dolor, nec molestie erat arcu non erat. Sed fermentum orci ex. Pellentesque mattis pharetra ex ac posuere.</p> </div> * { z-index: 1; } .sheet-background { display: none; } .sheet-example-content { position: relative; } img.sheet-background { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; } input.sheet-background-1:checked ~ img.sheet-background-1, input.sheet-background-2:checked ~ img.sheet-background-2, input.sheet-background-3:checked ~ img.sheet-background-3, input.sheet-background-4:checked ~ img.sheet-background-4, input.sheet-background-5:checked ~ img.sheet-background-5 { display: inline-block; } The above is untested, but should demonstrate the gist of the technique I'm talking about. The containing div must be position:relative in order to get the absolute positioning correct. (position:absolute is positioned relative to the element's nearest relatively-positioned ancestor)