Dynamic Flickr background image for CSS tag

I am trying to update my Flickr gallery script to instead replace a background image URL with the output of the Flickr script.

I created a pen here showing my progress.

<div id="banner">
    <div class="container">
        <header>
            <div class="row">
            </div>
            <h2>Page Title</h2>
        </header>
    </div>
</div>

And the Javascript

// Top Banner Flickr Script 
var flickrID = '189509301@N03'; 
var photoCount = '1'; 
var tags = "'featured','hcdbanner'"; // PHOTO TAGS
var tagmode="all"
if (tags != ''){tags = '&tags=' + tags}
var limit = photoCount-1;
var bannerUrl = 'https://api.flickr.com/services/feeds/photos_public.gne?id=' + flickrID + '&per_page=' + photoCount + '' + tags + '&format=json';
$.ajax({
    url: bannerUrl,
    dataType: "jsonp",
    jsonp: 'jsoncallback',
    success: function (data) {
        let bannerUrl = data.items.map(item => 
        'url(' + item.media.m.replace('_m','_b') + ')').join(',');
        $('#banner').css('background-image', bannerUrl);
    }
});

And the CSS

#banner {
     background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(67,65,159,.025) 25%);   
     position: relative;
     background-position: center center;
     padding: 10em 0em;
     background-size: cover;         
     margin-top: 20px;
     background-repeat: no-repeat;              
}
#banner header h2 {
     font-size: 2.8em;         
     text-align: center;
     color: #FFFFFF;
     text-shadow: 2px 2px #595959;
}

The idea behind it would be for each image on our Flickr account, we give a certain set of tags, it would then append it as a background image for the #banner tag. with a top gradient fading to white.

Would anyone be able top provide the proper way to attach the output to the #banner tag?

There are multiple problems in the ajax success function. If you check the console, you'll see there is a syntax error in the code that creates the background urls. In addition, the code is adding the urls to the banner as html rather than as css.

To fix these problems, modify the string formatting to:

'url(' + item.media.m.replace('_m','_b') + ')' 

// output: url(https://live.staticflickr.com/65535/54200949335_190f6313a7_b.jpg)

Array.map followed by Array.join is a better way to combine these urls than jQuery.each.

The list of background image urls can then be applied using jQuery css

$('#banner').css('background-image', flickrhtml);

And here is the final result with minimal changes to your original code:

// Top Banner Flickr Script 
var flickrID = '189509301@N03'; 
var photoCount = '1'; 
var tags = "'featured','hcdbanner'"; // PHOTO TAGS
var tagmode="all"
if (tags != ''){tags = '&tags=' + tags}
var limit = photoCount-1;
var flickrUrl = 'https://api.flickr.com/services/feeds/photos_public.gne?id=' + flickrID + '&per_page=' + photoCount + '' + tags + '&format=json';
$.ajax({
  url: flickrUrl,
  dataType: "jsonp",
  jsonp: 'jsoncallback',
  success: function (data) {
  
    let flickrhtml = data.items.map(item => 
      'url(' + item.media.m.replace('_m','_b') + ')').join(',');

    $('#banner').css('background-image', flickrhtml);
    
  }
});     

#banner {
 background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(67,65,159,.025) 25%);   
  position: relative;
  background-position: center center;
  padding: 10em 0em;
  background-size: cover;
  text-align: center;
  margin-top: 20px;
}

#banner header h2 {
  font-size: 2.8em;
  color: #FFFFFF;
  text-shadow: 2px 2px #595959;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div id="banner">
  <div class="container">
    <header>
      <div class="row"></div>
      <h2>Houston Housing &amp; Community Development</h2>
    </header>
  </div>
</div>