title: How to dynamically set background image url in CSS using Javascript
body: <p>I've been trying to make this work for a little while now.</p>
  
  <p>I thought the following code would work since I'm getting the value from the input and setting the background-image URL to said value.</p>
  
  <p>Thanks!</p>
  
  <p>The code inside of the head tag.</p>
  
  <pre><code>&lt;script  type="text/javascript"&gt;
  
   function loadImg() {
  
    var imageUrl = $('#hostImage').attr('value')
  
    document.getElementById("upload-success-bg").style.backgroundImage=imageUrl
  
  }
  
  &lt;/script&gt;
  
  &lt;style&gt;
  
   #upload-success-bg {
   background-image: url();
   }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Input field code</p>
  
  <pre><code>&lt;div class="status"&gt;
  
   &lt;input class="image-url" type="text" id="hostImage" name="hostImage" required="true" 
   value="URL LOADS HERE"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Where I would like to the image to show</p>
  
  <pre><code>&lt;div class="dropzone upload-success" id="upload-success-bg"&gt;
              &lt;div class="info"&gt;&lt;p&gt;Drag image file here&lt;/p&gt;&lt;p&gt;Or click here to select image&lt;/p&gt;&lt;/div&gt;
  &lt;input type="file" required="" class="input" accept="image/*"&gt;&lt;/div&gt;
  </code></pre>