try.css

body
{
    margin:0;
    padding:0;
}

section
{
    position:relative;
    width:100%;
    height:900px;
    background:url(bg1.png);
    background-size:100% 500px;
    background-attachment:fixed;
}

section .wave
{
    position:absolute;
    width:100%;
    height:143px;
    bottom:0;
    left:0;
    background:url(wave.png);
    animation: animate 10s  linear infinite;
    
}

section .wave:before
{
    content:'';
    position:absolute;
    width:100%;
    height:143px;
    top:0;
    left:0;
    background:url(wave.png);
    opacity:0.4;
    animation: animate-reverse 10s  linear infinite;
    
}

section .wave:after
{
    content:'';
    position:absolute;
    width:100%;
    height:143px;
    top:0;
    left:0;
    background:url(wave.png);
    opacity:0.4;
    animation-delay: -5s;
    animation: animate 10s  linear infinite;
    
}

@keyframes animate
{
    0%
    {
        background-position:0;
    }
    100%
    {
        background-position:1360px;
    }
}

@keyframes animate-reverse
{
    0%
    {
        background-position:1360px;
    }
    100%
    {
        background-position:0;
    }
}