Water ripple effect on background of website

Question

A client has asked me to apply a similar water ripple effect to the background image (and only the background image) on their website.

Considering that this is using a c

Answer 1

.paperButton {
  display: block;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 0;
  cursor:pointer;
}
.animate {
  -webkit-animation: ripple 0.65s linear;
  -moz-animation: ripple 0.65s linear;
  -ms-animation: ripple 0.65s linear;
  -o-animation: ripple 0.65s linear;
  animation: ripple 0.65s linear;
}
 @-webkit-keyframes 
ripple {  100% {
opacity: 0;
-webkit-transform: scale(2.5);
}
}
@-moz-keyframes 
ripple {  100% {
opacity: 0;
-moz-transform: scale(2.5);
}
}
@-o-keyframes 
ripple {  100% {
opacity: 0;
-o-transform: scale(2.5);
}
}
@keyframes 
ripple {  100% {
opacity: 0;
transform: scale(2.5);
}
}


$(function(){
    var ink, i, j, k;
    $(".paperButton").mousedown(function(e){    
            if($(this).find(".ink").length === 0){
                $(this).prepend("");
            }

            ink = $(this).find(".ink");
            ink.removeClass("animate");

            if(!ink.height() && !ink.width()){
                i = Math.max($(this).outerWidth(), $(this).outerHeight());
                ink.css({height: i, width: i});
            }

            j = e.pageX - $(this).offset().left - ink.width()/2;
            k = e.pageY - $(this).offset().top - ink.height()/2;

            ink.css({top: k+'px', left: j+'px'}).addClass("animate");

});
});