title: Jquery Dynamically Replace Background Image
body: <p>I'm trying to allow my users to dynamically change the background image of a specific DIV. They are doing this by uploading an image via a HTML form, once the image is uploaded I'm using JQuery to update the DIV's background.</p>
  
  <p>I know this has been asked several times before and using an example I found on line I can replace the background image, however if the user wants to upload an new image and change it again then it fails to work.</p>
  
  <p>It appears I can only change the image once, subsequent changes don't happen unless I refresh the page.</p>
  
  <p>My DIV is using the following CSS</p>
  
  <pre><code>#background
  {
      width:450px;
      height:200px;
      background-color: #FFFFFF;
      background-image: url("images/background.png");
      background-repeat: no-repeat;
      #background-size: contain;
      background-size: cover;
  }
  </code></pre>
  
  <p>Onload the DIV has a default background image, the user uploads the image via the form and using the following JQuery I change the image to the new uploaded file.</p>
  
  <pre><code>$('#background').css("background-image", "url(" + filename + ")");  
  </code></pre>
  
  <p><code>filename</code> is the name of the file uploaded. This all works fine and the new image is shown.</p>
  
  <p>If I upload another file, I can see the file has changed correctly in the upload folder, but the DIVs background doesn't change.</p>
  
  <p>One thing I have noticed, after the first change is Chrome shows the CSS for the DIV with the following unticked.     <code>background-image: url(images/bacground.png);</code>, it also appears the DIV now has a style assigned to it with the name of the new file as the background.</p>
  
  <p>How do I do this so they can change the background as often as they like ?</p>
  
  <p>Thanks</p>