html2canvas wont include css background image in download

Question

So I am using HTML 2 canvas to generate a social media image.

The issue I'm having is that its not including the css background image.

Having checked the other posts on stack overflow on this none of the solutions seem to work, the version is up-to-date and this wont work even with same origin image. What am I getting wrong?

Codepen link here

function getCapture(){
  html2canvas(document.querySelector(".quote")).then(canvas => {
    
    var quote = document.querySelector(".quote");

    document.body.appendChild(canvas);

    var download = document.getElementById("download");
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    download.setAttribute("href", image);
    download.setAttribute("download","quote.png");

    download.click();

  });
}

$(function(){
  
  $('.generator [name="author"]').keyup(function(){
    var author = $(this).val();
    $('.quote .text small').html('⚊ ' + author);
  });
  
  $('.generator [name="quote"]').keyup(function(){
    var quote = $(this).val();
    $('.quote .text p').html(quote);
  });
  
  $('.generator [name="image"]').on('change', function(){
  
    var input = this;
    var url = $(this).val();
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
     {
        var reader = new FileReader();
        reader.onload = function (e) {
           $('.quote img').attr('src', e.target.result);
        }
       reader.readAsDataURL(input.files[0]);
    }else{
      $('.quote img').attr('src', '');
    }
    
  });
  
});

body{
  background: #152C46;
}

body{
  font-family: 'Manrope';
  font-weight: 400;
}

.quote{
  display: block;
  position: relative;
  /*
  top: 50%;
  transform: translateY(-50%);
  */
  width: 1200px;
  height: 628px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 5%;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   background-image: url("https://i.imgur.com/DVJHJnR.png");
  background-size: 700px;
  background-repeat: no-repeat;
  background-position: top left;
  background-color: white;
}
.bg-img img {
  float: left; 
  top: 0;
  position: absolute;
}
.quote .image{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 1;
  text-align: center
}
.quote .image img{
  display: inline-block;
  width: 160px;
  height: 160px;
  vertical-align: middle;
  margin-top: 15%;
  opacity: 1;
  border-radius: 50%;
  object-fit:cover;
}
.quote .overlay{
  position: absolute;
  width: 97%;
  height: 97%;
  top: 1.5%;
  left: 1.5%;
  z-index: 2;
  border: solid 5px #fff
}
.quote .overlay:after{
  content: '❝';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: block;
  color: #152C46;
  line-height: .9;
  font-size: 40em;
  font-weight: 600;
  opacity: .12;
}
.quote .content{
  position: absolute;
  width: 80%;
  height: 80%;
  top: 30%;
  left: 10%;
  z-index: 4;
  text-align: center;
}
.quote .content .text{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #152C46;
}
.quote .content .text > *{word-break: break-word}
.quote .content .text p{
  font-size: 2.7em;
  font-weight: 200
}
.quote .content .text small{
  font-size: .9em;
  font-weight: 700;
  color: #152C46;
  letter-spacing: .01em;
}

.generator{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: rgba(255,255,255,1);
  padding: 25px;
  box-shadow: 0 20px 15px 15px rgba(0,0,0,.2);
  z-index: 5
}
.generator .generator-inner{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.generator h3{
  font-weight: 700;
  margin-bottom: 20px
}
.generator .btn{
  border: 0 none;
  background-color: #FF3CAC;
}
canvas{display: none}

<link href="https://cdn.materialdesignicons.com/2.1.99/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.min.js"></script>
<div class="quote">
  <div class="image">
    <img src="https://placeimg.com/500/500/arch/sepia" alt="">
  </div>
<!--   <div class="overlay"></div> -->
  <div class="content">
    <div class="text">
      <p>Love all, trust a few, do wrong to none.</p>
      <small> William Shakespeare</small>
    </div>
      
  </div>
</div>

<div class="generator">
  <div class="generator-inner">
    
    <h3>Generator</h3>

    <div class="form-group">
      <label for="quote">Quote</label>
      <textarea type="text" class="form-control" maxlength="200" name="quote" required>Love all, trust a few, do wrong to none.</textarea>
    </div>

    <div class="form-group">
      <label for="author">Author</label>
      <input type="text" class="form-control" name="author" value="William Shakespeare" required>
    </div>

    <div class="form-group">
      <label for="image">Image</label>
      <input type="file" class="form-control" name="image" accept="image/x-png,image/gif,image/jpeg">
    </div>

    <div class="form-group">
      <a href="javascript:getCapture();" class="btn btn-block btn-secondary">DOWNLOAD</a>
      <a href="javascript:" id="download" style="display: none"></a>
    </div>
    
  </div>     
</div>

Answer 1

Change this in order to get the background image:

  html2canvas(document.querySelector(".quote"),{
    allowTaint: true,
    useCORS: true
  }).then(canvas => {

let me know if it helps you.