2

I am trying to take the href attribute from an a tag, and apply that as the background-image of the anchor tag's child. For some reason it is not working.
I have the following html:

   <div class="large-unit picture" itemscope itemtype="http://schema.org/ImageGallery">
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="IMAGES/Gallery_PERSONAL/librarysession.jpg" itemprop="contentUrl" data-size="1500x2100" data-index="1" title="">
            <div class="thumbnail" itemprop="thumbnail"></div>
        </a>
    </figure>
  </div>


and the following javascript(using jquery):

  $('figure').each( function() {
    var thumb = $(this).find('.thumbnail');
    var image = $(this).find('a').attr('href');
    $(thumb).css('background-image', image);
  });
Karl
  • 95
  • 1
  • 2
  • 13

1 Answers1

4

You should do it like:

$('figure').each( function() {
    var thumb = $(this).find('.thumbnail');
    var image = $(this).find('a').attr('href');
    $(thumb).css('background-image', 'url(' + image + ')');
});
Dan Cantir
  • 2,915
  • 14
  • 24
  • how was background image supposed to know I was using a url without me telling it? wow its so obvious now, thanks for catching that! – Karl Apr 17 '17 at 16:23