<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;
}