Magnific popup, как задать разный бэкграунд?

$('.popup-gallery').magnificPopup({ 
    delegate: 'a', 
    type: 'image', 
    gallery: { 
        enabled: true 
    } 
}); 
$('.popup-gallery-2').magnificPopup({ 
    delegate: 'a', 
    type: 'image', 
    gallery: { 
        enabled: true 
    }, 
    callbacks: { 
        beforeOpen: function() { 
            var $triggerEl = $(this.st.el), 
                newClass = $triggerEl.data("modal-class"); 
            if (newClass) { 
                this.st.mainClass = this.st.mainClass + ' ' + newClass; 
            } 
        } 
    } 
});

.white-popup-block { 
  background: #FFF; 
  padding: 20px 30px; 
  text-align: left; 
  max-width: 650px; 
  margin: 40px auto; 
  position: relative; 
} 
 
.mfp-bg-red { 
  background: rgba(255, 0, 0, .5); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.css" rel="stylesheet" /> 
 
<div class="popup-gallery"> 
    <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"></a> 
</div> 
<div class="popup-gallery-2"> 
    <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" data-modal-class="mfp-bg-red" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"></a> 
    <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" data-modal-class="mfp-bg-red" title="Winter Dance"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"></a> 
</div>