CSS 3 or svg wave in a background

Question

How can I build a wave on a transparent image background ?

Layout-Image:

I need the wave in the white top background.

Answer 1

Not exactly like it Fiddle

<svg width="500" height="200">
    <path d="m 0 100 l 40 0 q 50 0 60 10 100 80 250 0,100 -20 155 0 v 200 h -500 z" stroke="red" fill="orange"/>
</svg>

Answer 2

I slightly improved version of akshay's answer. This includes two separate options.

OPTION 1

If aspect ratio doesn't have to be preserved, then the curve will change with width.

http://jsfiddle.net/f6n73avk/2/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100%" viewBox="0 0 90 20" preserveAspectRatio="none">
    <path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>

OPTION 2

If the aspect ratio has to be preserved, then we have to use same units value for height and width of svg element.

http://jsfiddle.net/o1eghm7v/1/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 90 20" >
    <path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>

See here I used width and height both as 100%. To change the colour you have to change the value of fill attribute.
Also, I have used absolute path commands as they are simpler to edit.

Explanation

M - command moves the drawing point to the the coordinates specified after it, or 0,5 (SVG coordinate system)

H draws Horizontal line to specified X-coordinate from the current point (0,5)

C draws cubic bezier, with first point coords as first handle, second second handle, and third is the end point.

S draws a cubic bezier, but its first handle is the reflection of the last handle of last C command about the end point of last C.

V draws vertical line to specified Y-coordinate.

Z closes the path, ie draws a straight line from current point to last M point.