<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> * { margin: 0; padding: 0; } html { height: 100%; } body{ background: url(header-background.jpg) no-repeat; background-size: cover; height:100%; } </style> <body > </body> <script src="../js/jquery-2.1.4.min.js"></script> <script src="js/jquery.ripples-min.js"></script> <script> /* https://github.com/sirxemic/jquery.ripples */ $(document).ready(function() { try { $('body').ripples({ resolution: 512, dropRadius: 20, //px perturbance: 0.04, }); } catch (e) { $('.error').show().text(e); } }); </script> </html>