Change background-image of div based on other html element...

It's been too long since I delved this deeply into CSS and HTML, but is there a way to set the background image of a div using a select menu or pulling the url from a text field?

No. However, some of the magic of the Roll20 character sheet system can let you achieve the result you want. Use your select to choose the background image. Have a set of invisible checkboxes or radio buttons with the same name as the select, with each one using the value of one of the options. Based on which checkbox/radio button is checked, show/hide the appropriate background. The easiest way to do the background would probably be a position:absolute;top:0;left:0 image matching the dimensions of the container (which needs to be position:relative in order for the absolute positioning to be relative to it ). Then make sure the image's z-order is lower than anything else that it's sharing the container with. This solution would not work with an arbitrary text input url, and I can't think of any way to achieve that.

Can you post a quick skeleton of the html for the select and invisible item? That's where I'm stuck. Not sure how the two are relating to each other except by name.

&lt;select name="attr_background"&gt; &lt;option value="1"&gt;Sky&lt;/option&gt; &lt;option value="2"&gt;Captain&lt;/option&gt; &lt;option value="3"&gt;13&lt;/option&gt; &lt;option value="4"&gt;Honey&lt;/option&gt; &lt;option value="5"&gt;Badger&lt;/option&gt; &lt;/select&gt; &lt;div class="sheet-example-content"&gt; &lt;input type="radio" value="1" name="attr_background" class="sheet-background sheet-background-1"&gt; &lt;input type="radio" value="2" name="attr_background" class="sheet-background sheet-background-2"&gt; &lt;input type="radio" value="3" name="attr_background" class="sheet-background sheet-background-3"&gt; &lt;input type="radio" value="4" name="attr_background" class="sheet-background sheet-background-4"&gt; &lt;input type="radio" value="5" name="attr_background" class="sheet-background sheet-background-5"&gt; &lt;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>"&gt; &lt;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>"&gt; &lt;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>"&gt; &lt;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>"&gt; &lt;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>"&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;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.&lt;/p&gt; &lt;/div&gt; * { 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 &nbsp; be position:relative in order to get the absolute positioning correct. (position:absolute is positioned relative to the element's nearest relatively-positioned ancestor)

Cool. Thank you. Will delve more into it in the morning after work. I finally got the macro details box to pop up where I want it just before I left for work. Once I get a handle on what you've posted, the rest should be easy.

Haha! Woot! It works. Mostly. There's some z-index issues and whatnot, but now that I see it work... I can refine it to do what I want it to do. :D Thank you Brian!&nbsp;

Would it be possible to move the image declarations into css using selector[value="1"]{background-image: url(img);} somehow?

Here's a quick snapshot of it in action. Even got the Add/Modify buttons to drop below the icons instead of shifting around as you add macros. Time for bed. Tomorrow, I will try and solve the issue of re-ordering and deleting the macros when clicking the Modify button. If I can sort that you... I'm in the home stretch! Current idea to solve the Modify problem would be to somehow change the width of the macro buttons to the width of the container div. Maybe even pop in a div to the right of each button with its name and maybe some other info so there's not a bunch of blank space.