Setting background image as name attribute on click jquery not working

Question

I am setting each page's hero background image as the name of the button clicked including the URL and extension in the string. In the alert window, it shows that the correct background image but the background image is not set. What is wrong? I am setting the target the same way, maybe this is where the conflict is happening, so I have included this code too.

var pageTrigger = $(".tab-button-pages");
var mainSections = $(".section");
var tabletBackground = $(".tablet-content-background");

pageTrigger.on('click', function(){
  var $this = $(this),
  target = $this.data('target');

  name = $this.attr('name');
  $(".tablet-content-background").css('background-image','url(./img/'+name+'.png)');

  pageContainer.load(target);

  return false;
});

<div class="tab-button-pages" name="meridian" data-target="meridian.html">
    See More
</div>

Answer 1

 var pageTrigger = $(".tab-button-pages"); var mainSections = $(".section"); var tabletBackground = $(".tablet-content-background"); var pageContainer = $(".tablet-content-background"); pageTrigger.on('click', function(){ var $this = $(this), target = $this.data('target'); name = $this.attr('name'); pageContainer.attr('style','background-image:url('+name+'); min-height: 300px;'); pageContainer.html(target); return false; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tab-button-pages" name="https://via.placeholder.com/150" data-target="Background 1"> See More </div> <br><br> <div class="tab-button-pages" name="https://via.placeholder.com/320" data-target="Background 2"> See More </div> <br><br> <div class="tablet-content-background"></div>