How to apply css attribute defined by js variable [duplicate]

Question

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);
  });

Dan Cantir · Accepted Answer · 2017-04-17 16:21:49Z

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 + ')');
});

answered Apr 17, 2017 at 16:21

Dan Cantir

2,96517 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Karl Over a year ago

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!

Collectives™ on Stack Overflow

How to apply css attribute defined by js variable [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related