title: Replace image on click with image select
body: <p>I have set up a little template with a basic header. I am trying to make something similar to a drag and drop website building, but in this case the layout will be the same, just the content changes.</p>
  
  <p>As I say, I have created a header element and given it a background image</p>
  
  <pre><code>header {
    width: 100%;
    height: 200px;
    background: url(https://pearsonified.com/theme/neoclassical/wp-content/themes/neoclassical/headers/header_2.jpg) center center no-repeat;
    background-size: cover;
  }
  </code></pre>
  
  <p>To get the image to change on click, I could do something like this</p>
  
  <pre><code>$(function() {
      $('#header').click(function() {
       $(this).css('background', 'url(https://pearsonified.com/theme/neoclassical/wp-content/themes/neoclassical/headers/header_1.jpg)');
      });
  });
  </code></pre>
  
  <p>I have set up an example <a href="https://jsfiddle.net/af8ezhxa/" rel="nofollow noreferrer">JSFiddle</a>.  Although this is similar to what I want to do, instead of changing to a hardcoded image, I want to allow the user to select the image from their computer.  So a bit like an image upload select option, but in this case I am not uploading anything.  My aim on completion is to have a save button, that will generate the HTML/CSS files for these updates.</p>
  
  <p>So I was wondering how would I go about allowing the user to choose what image they want to replace the default with?</p>
  
  <p>Thanks</p>