title: Trying to change the Background of section when hover is done to particular block (div) [working]
body: <p>when i hover the block (div) the background of that entire section to be changed., totally 4cards &amp; 4 images to be changed</p>
  <p>classes are seo-program-01, seo-program-02, seo-program-03, seo-program-04 for the blocks (div),
  class of the section is seo-programs-section (which the BG to be changed)</p>
  <p><a href="https://i.stack.imgur.com/nBxLB.jpg" rel="nofollow noreferrer">Image portraits Section with Cards / Blocks</a></p>
  <p>and here goes the code (Fixed and the Code works good for me),</p>
  <pre><code>document.getElementsByClassName(&quot;seo-program-01&quot;)[0].addEventListener(&quot;mouseover&quot;, function() {
     document.getElementsByClassName(&quot;seo-programs-section&quot;)[0].style.backgroundImage = &quot;url(https://mywebsite.com/wp-content/uploads/2021/04/search-marketing-services-slider-home.png)&quot;;
     document.getElementsByClassName(&quot;seo-programs-section&quot;)[0].style.backgroundRepeat = &quot;no-repeat&quot;;
     document.getElementsByClassName(&quot;seo-programs-section&quot;)[0].style.backgroundPosition = &quot;160% 50%&quot;; 
  }, false);
  
  document.getElementsByClassName(&quot;seo-program-02&quot;)[0].addEventListener(&quot;mouseover&quot;, function() {
     document.getElementsByClassName(&quot;seo-programs-section&quot;)[0].style.backgroundImage = &quot;url(https://mywebsite.com/wp-content/uploads/2021/04/seo-program-success-analytics-slider-home.png)&quot;;
     document.getElementsByClassName(&quot;seo-programs-section&quot;)[0].style.backgroundRepeat = &quot;no-repeat&quot;;
     document.getElementsByClassName(&quot;seo-programs-section&quot;)[0].style.backgroundPosition = &quot;160% 50%&quot;; 
  }, false);
  
  document.getElementsByClassName(&quot;seo-program-03&quot;)[0].addEventListener(&quot;mouseover&quot;, function() {
    document.getElementsByClassName(&quot;seo-programs-section&quot;)[0].style.backgroundImage = &quot;url(https://mywebsite.com/wp-content/uploads/2021/04/optimized-press-release-services-slider-home.png)&quot;;
    document.getElementsByClassName(&quot;seo-programs-section&quot;)[0].style.backgroundRepeat = &quot;no-repeat&quot;;
    document.getElementsByClassName(&quot;seo-programs-section&quot;)[0].style.backgroundPosition = &quot;160% 50%&quot;; 
  }, false);
  
  document.getElementsByClassName(&quot;seo-program-04&quot;)[0].addEventListener(&quot;mouseover&quot;, function() {
     document.getElementsByClassName(&quot;seo-programs-section&quot;)[0].style.backgroundImage = &quot;url(https://mywebsite.com/wp-content/uploads/2021/04/social-media-managememnt-services-slider-home.png)&quot;;
     document.getElementsByClassName(&quot;seo-programs-section&quot;)[0].style.backgroundRepeat = &quot;no-repeat&quot;;
     document.getElementsByClassName(&quot;seo-programs-section&quot;)[0].style.backgroundPosition = &quot;160% 50%&quot;; 
  }, false);
  </code></pre>
  <p>Error at console :</p>
  <pre><code>Uncaught TypeError: document.getElementByClassName is not a function
      at HTMLHeadingElement.&lt;anonymous&gt; ((index):1403)
  </code></pre>