<div class="wave"> <img src="<?php bloginfo('template_url'); ?>/images/wave.svg" alt="" width="100%" style=" position: absolute; bottom: 0;"> </div>
.wave{ position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0; height: 300px; } .wave:before{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: url(images/wave.svg) repeat-x; background-size: cover; background-position: -1000px 0; opacity: .2; animation: waveOne 60s linear infinite; } @keyframes waveOne { 50%{ background-position: 0 0; } } .wave:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: url(images/wave.svg) repeat-x; background-size: cover; background-position: 2732px 0; opacity: .3; animation: waveOne 120s linear infinite; }