title: CSS3 / HTML 5 / PNG blur content behind element
body: <p>I'm trying to blur the content behind a fixed position header so that the content behind it has the user scrolls is blurred when behind this div.</p>
  
  <p>I used to achieve this with simple opacity in CSS but this does not blue the content behind the DIV, merely imposes a translucent panel in front of it.</p>
  
  <p>Is there a simple way even if its a cheat of achieving what I am after. Whether by using a PNG background image or in CSS.</p>
  
  <p>Take a look at the way iOS7 does this <a href="http://www.apple.com/ios/ios7/features/">http://www.apple.com/ios/ios7/features/</a>.</p>