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

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>

CodePudding user response：

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>

CodePudding user response：

Elements later inside the DOM (Document Object Model, essentially your HTML) usually are positioned on top of elements earlier. So the easiest solution is to switch the order of your img and div.

If this is not possible for whatever reason, you can change the layering in CSS using z-index. The higher it’s value, the more the affected element gets on top. E.g. for #dog:

z-index: 99;

CodePudding user response：

You could do something like this:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>DANCE THE NIGHT AWAY</title>
  <style>
    .foreground {
      z-index: 790909;
    }
    
    body{
          -webkit-animation: change 10s infinite;
    }
    
    @-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;
    }
  </style>
</head>

<body>
  <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>
</body>

</html>