<div class="background">
  <div class="water"></div>
</div>
    
<svg>
  <filter id="turbulence" 
          x="0" y="0" 
          width="100%" height="100%">
  <feTurbulence id="sea-filter" 
                numOctaves="3" 
                seed="2" 
                baseFrequency="0.02 0.05"></feTurbulence>
  <feDisplacementMap scale="10" 
                     in="SourceGraphic"></feDisplacementMap>
  <animate xlink:href="#sea-filter" 
           attributeName="baseFrequency" 
           dur="60s" 
           keyTimes="0;0.5;1" 
           values="0.02 0.06;0.04 0.08;0.02 0.06" 
           repeatCount="indefinite">
  </animate>
</svg>
body {
  margin: 0;
  padding: 0;
  width: 100vw;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-image: url("https://images.pexels.com/photos/734973/pexels-photo-734973.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-size: cover;
}

.background .water {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("https://images.pexels.com/photos/734973/pexels-photo-734973.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-size: cover;
  filter: url("#turbulence");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.