Show Different Body Background Image Based On Selection

I'm not sure if this is possible, but I want that if you select a option in the select menu, that the background will change on the page Can it also be done with a smooth fade out

Solution 1:

You can apply an function to the onchange-event of your select-element which changes the background-image of your site:

$('#ID_OF_YOUR_SELECT').change(function() {
    $('body').css('background-image', 'url("' + this.value + '")');
});

Here is an updated codepen based on your example: http://codepen.io/anon/pen/yNvapW

Solution 2:

Adding to Asgaros answer, I have added the fade in and out feature.

Here is the result: http://codepen.io/anon/pen/wayzyx. The effect was done by adding a few lines of css to the body's css.

-webkit-transition: background 0.8s linear;
-moz-transition: background 0.8s linear;
-o-transition: background 0.8s linear;
transition: background 0.8s linear;

Solution 3:

This changes the class of body and fades the background when the select value is changed.

//set background based on default select value
$(document).ready(
  function() { changeBackground.call($('.form-control')); }
);

//change background when select value is changed
$('.form-control').change(function() {
  changeBackground.call($(this));
});

functionchangeBackground() {
  var $body = $('body');
  var values = "";
  this.children('option').each(function() {
    values += $(this)[0].value + " ";
  });
  var selectedValue = this[0].value;
  
  $body.removeClass(values.replace(selectedValue, ""));
  $body.addClass(selectedValue);
};

body {
    background-attachment: fixed;
    background-position: 50%50%;
    background-size: cover;
    -webkit-transition: background-image 500ms ease;
    transition: background-image 500ms ease;
}
body.london {
    background-image: url("http://www.manners.nl/wp-content/uploads/2014/08/Manners-stijlvolste-steden-londen-6.jpg");
}
body.paris {
    background-image: url("https://images.indiegogo.com/file_attachments/620900/files/20140602122905-paris.jpg?1401737345");
}
body.italy {
    background-image: url("http://www.liberty-int.com/Public/Italy-Signature-Slide5-Venice.jpg");
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><br><br><br><selectclass="form-control select"><optionvalue="london">Show London Background Picture</option><optionvalue="paris">Show Paris Background Picture</option><optionvalue="italy">Show Italy Background Picture</option></select><br><divclass="jumbotron">
IF LONDON SELECTED THEN BACKGROUND: <br>http://www.manners.nl/wp-content/uploads/2014/08/Manners-stijlvolste-steden-londen-6.jpg<br><br>
IF PARIS SELECTED THEN BACKGROUND: <br>    
http://travelnoire.com/wp-content/uploads/2013/12/eiffel-tower-paris-2.jpg<br><br>
IF ITALY SELECTED THEN BACKGROUND: <br>
    https://upload.wikimedia.org/wikipedia/commons/5/53/Colosseum_in_Rome,_Italy_-_April_2007.jpg
</div>