'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>
htmlcssbackgroundclipping


Solution 1:[1]

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>

Solution 2:[2]

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;

Solution 3:[3]

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 class="foreground" 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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Janik
Solution 3 corn_not_slapped

Related Questions