How do I make <div> not cover images in HTML?

I used <div> to make a color changing background, but the background covers the image I have. How can I make the <div> stay in the background? (Btw I know in my code there's 2 sections for color but deleting either of them makes the colors not work.) Here's what it looks like when run: https://the-hampsterdog-dance.glitch.me/ thanks in advance.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>DANCE THE NIGHT AWAY</title>  
      
      <img
        src="https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809"
        width="140"
        height="100"
        alt="DANCE THE NIGHT AWAY"
      />
     
      <div id="dog"></div>
      <style>
        

        @-webkit-keyframes bg-animation {
          15% {
            background-color: yellow;
          }
          30% {
            background-color: green;
          }
          45% {
            background-color: blue;
          }
          60% {
            background-color: purple;
          }
      
    animation: change 10s infinite;
      }
      @-webkit-keyframes change{
        25%{background-color: blue;}
        50%{background-color: green;}
        75%{background-color: purple;}        
      }
      #dog {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-animation: change 10s infinite;
}
    </style>
    </body>
  </head>
</html>

Solution

You could either move the dog image inside <div id="dog"></div> or target the body rather than #dog for the background color animation. Both approaches will work.

<!DOCTYPE html>
<html lang="en">
  <head>
    </head>
  <body>
    <title>DANCE THE NIGHT AWAY</title>  
      
      <img
        src="https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809"
        width="140"
        height="100"
        alt="DANCE THE NIGHT AWAY"
      />
     
      <div id="dog"></div>
      <style>
        

        @-webkit-keyframes bg-animation {
          15% {
            background-color: yellow;
          }
          30% {
            background-color: green;
          }
          45% {
            background-color: blue;
          }
          60% {
            background-color: purple;
          }
      
    animation: change 10s infinite;
      }
      @-webkit-keyframes change{
        25%{background-color: blue;}
        50%{background-color: green;}
        75%{background-color: purple;}        
      }
      body {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    -webkit-animation: change 10s infinite;
}
    </style>
    </body>
</html>