SelectBg

by Apple Ilagan

HTML

<div id="bg"></div>

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

CSS

#bg {
    border: 2px solid red;
    width: 300px;
    height: 300px;
    background: url(http://lorempixel.com/400/300) no-repeat 50% 50%;
    margin:20px auto;
}

JavaScript

var bg = {
    'bg': 'http://lorempixel.com/400/300',
    'bg1': 'http://lorempixel.com/g/400/300',
    'bg2': 'http://lorempixel.com/400/200/sports/1'
};

$('#backgrounds').change(function() {
    var background = $(this).find('option:selected').text();    
    if (!background in bg) {
        return;
    }

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