Fill a div with a wavy border SVG path

Question

I want to fill the

with the color and add shadow to the border but my code is doing this. I actually need it in the way shown in the image.

Answer 1

For such a shape, you can use an svg pattern and fill a rectangle width the pattern as shown in the following example :

html,body{margin:0;padding:0;}
div{
  background: url('http://i.imgur.com/qi5FGET.jpg');
  background-size:cover;
  overflow:hidden;
}
svg{display:block;}

  
title
  
whatever content
with several lines