JSFiddle - React, Tailwind, and code Playground

by alexdickson

HTML

<div id="changemybg"></div>

<select name="change" id="backgrounds">
    <option>bg</option>
    <option>bg1</option>
    <option>bg2</option>
</select>

CSS

#changemybg {
    border: 2px solid red;
    width: 32px;
    height: 32px;
    background: url(http://www.gravatar.com/avatar/e7bbd35b218601e4125231fb25d0c86a?s=32&d=identicon&r=PG) no-repeat 50% 50%;
}

JavaScript

var bg = {
    'bg': 'http://www.gravatar.com/avatar/e7bbd35b218601e4125231fb25d0c86a?s=32&d=identicon&r=PG',
    'bg1': 'http://www.gravatar.com/avatar/d42026e86bae7abef3f66d644c54e6a2?s=32&d=identicon&r=PG',
    'bg2': 'http://www.gravatar.com/avatar/e96a421d76c1fc107a5d291c6999b2ef?s=32&d=identicon&r=PG'
};

$('#backgrounds').change(function() {
    var background = $(this).find('option:selected').text();

    
    if (!background in bg) {
        return;
    }

    $('#changemybg').css({
        'backgroundImage': 'url(' + bg[background] + ')'
    });
});