body {
    margin: 0;
  }
  
  .bgimage {
    position: relative;
    width: 100%;
    height: 550px;
    background-image: url('pic1.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    animation: bgChange 20s linear infinite;
  }
  
  @keyframes bgChange {
    0% {
      background-image: url('pic1.jpeg');
    }
    20% {
      background-image: url('pic1.jpeg');
    }
    25% {
      background-image: url('pic2.jpg');
    }
    45% {
      background-image: url('pic2.jpg');
    }
    50% {
      background-image: url('pic3.jpg');
    }
    70% {
      background-image: url('pic3.jpg');
    }
    75% {
      background-image: url('pic4.jpeg');
    }
    95% {
      background-image: url('pic4.jpeg');
    }
  }
  @media (min-width: 320px) and (max-width: 480px) {
    .bgimage {
        width: 100%;
        height: 300px;
      }
    
}
@media (min-width: 481px) and (max-width: 768px){
    .bgimage {
        width: 100%;
        height: 300px;
      }   
}
@media (min-width: 769px) and (max-width: 1024px) {
    .bgimage {
        width: 100%;
        height: 420px;
      } 
}
@media (min-width: 1025px) and (max-width: 1200px) {
    .bgimage {
        width: 100%;
        height: 500px;
      } 
}