title: Append an inline image to H1
body: <p>I have a section with the id of 'home'. I have a bit of JS that changes the background image of the 'home' section on page load. </p>
  
  <p>I have 5 background images in total and I have 5 logo images as well. Each logo pairs with a specific background image. How do I alter my code to ensure the correct logo loads with the correct background image? The logo must appear inline, so actually in the HTML document. I've tried appending the logo to a container called 'red-cherry' but all of my code breaks.</p>
  
  <p>My attempt to do this but I understand I haven't tried to check against what background image has been loaded.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>// Create an array of images
  var images = ['a-pat.jpg', 'b.jpg', 'c-pat.jpg', 'd-pat.jpg', 'f-pat.jpg'];
  var logos = ['cr-pink.png', 'cr-cherry.png', 'cr-green.png', 'cr-blue.png', 'cr-red.png'];
  
  // Display one random one each time the page loads
  $('#home').css({'background-image': 'url(../img/wallpaper/' + images[Math.floor(Math.random() * images.length)] + ')'});
  
  $("h1.cherry-red").append({'&lt;img src="../img/logos/' + logos[Math.floor(Math.random() * logos.length)] + '"/&gt;')});
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section id="home"&gt;
      &lt;h1 class="cherry-red"&gt;&lt;span&gt;Cherry Red&lt;/span&gt;&lt;/h1&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>For clarity</strong></p>
  
  <p><em>I need to check what background image is being loaded in to #home and then load the correct logo to H1. I need to somehow say if a-pat.png is loaded as a background image ONLY load the logo cr-pink.png</em></p>
  
  <p><strong>Further explanation</strong></p>
  
  <p>Could I add a bunch of if statements after the bit of code I already have? For example: If images = 'a-pat.png' then append cr-pink.png to H1 else if images = b.jpg then append cr-cherry.png to H1 and so on... Is this possible?</p>