title: Fancybox: using a background image
body: <p>I'm having a bit of trouble with fancybox on the photo's section. </p>
  
  <p>At the moment when you click on one of the images it loads the same size as on the page (the image is actually much larger) and also removes the div from the page.</p>
  
  <p><strong>I want to load the background image of the div at it's full size into the fancybox.</strong></p>
  
  <pre><code>&lt;div class="main-photo fancybox" rel="group" style="background-image:url('&lt;?php echo $photo; ?&gt;');"&gt;
     &lt;a href="&lt;?php echo the_sub_field('photo'); ?&gt;"&gt;
        &lt;img src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/images/picture-of-health-photo-frame.png" height="240" width="360" /&gt;
     &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>img</code> within the link is actually the photo frame, which I don't want to be included within the fancybox.</p>