Image Overlay And Change On Dropdown Selection?

I'd like to make something of this kind where you can select the fore and background and make it display together. : https://www.control4.com/solutions/products/switches I do under

Solution 1:

If you notice, those images are png and of same dimensions with perfectly positioned switch and background. so displaying one div inside another will overlap it perfectly as the snippet below

Something with jQuery, should get you going....

$(document).ready(function() {
  $('#switchSel').change(function() {

    var switchPic = $('.switch');
    switchPic.removeClass();
    switchPic.addClass('switch ' + $(this).val());
  })
})

.back {
  background: url(https://www.control4.com/files/large/805347005e9b7ee87d4da29d56c9fa44.png);
  height: 575px;
  width: 361px;
  display: inline-block;
}
.brown {
  background: url(https://www.control4.com/files/large/61ba4092e170c22c3806a930ca7924f5.png);
  height: 575px;
  width: 361px;
}
.black {
  background: url(https://www.control4.com/files/large/251e9a5ac63b46f4acf8b09dbc5e17b7.png);
  height: 575px;
  width: 361px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><selectid="switchSel"><optionvalue="black">black</option><optionvalue="brown">brown</option></select></div><divclass="switch black"><divclass="back"></div></div>