title: Can I change the preview image location (Dropzone.js)
body: <p>I would like to know if and how I can change the preview image location. I have designed a preview box with HTML and CSS and would like to know if it is possible to (re)place the preview image background-image url in my CSS? </p>
  
  <p>CSS</p>
  
  <pre><code>.preview-overlay-1 {
    position: absolute;
    width: 100%;
    height: 210px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/file-upload/fileupload-examples/1.jpeg");
    background-size: cover;
    z-index: 3;
    text-align: center;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="document-upload-box-upload"&gt;
    &lt;form action="/file-upload" class="dropzone dropzone-fileupload" id="fileuploadDropzoneImg"&gt;
      &lt;i class="fa fa-file-image-o" aria-hidden="true" id="fileupload-image-icon"&gt;&lt;/i&gt;
      &lt;p class="add-document"&gt;
        ADD IMAGE OR VIDEO
      &lt;/p&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>HTML (Preview overlay)</p>
  
  <pre><code>&lt;div class="fileupload-preview-1"&gt;
    &lt;div class="preview-overlay-1"&gt;
      &lt;p class="preview-overlay-text-1"&gt;
        Click to add Caption
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="preview-image-1"&gt;&lt;/div&gt;
    &lt;textarea class="overlay-display-hide preview-caption-1"
      placeholder="Add Your Caption here..."&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>Dropzone.options.fileuploadDropzoneImg = {
    maxFilesize: 100,
    acceptedFiles: "image/jpg,image/jpeg,image/png,image/gif,video/mp4",
    parallelUploads: 4,
    maxFiles: 4,
    addRemoveLinks: false,
  }
  </code></pre>