title: Blur background - Jquery / Pure CSS / Image?
body: <p>I need to create a page which has a full screen cover image and 2 div blocks containing content that sit on top of this cover image.</p>
  
  <p>The div blocks need to have a slightly greyed blurred background effect - similar to the effect used by the Yahoo Weather app </p>
  
  <p>(<a href="https://www.google.co.uk/search?client=firefox-a&amp;hs=xQa&amp;rls=org.mozilla:en-US:official&amp;channel=fflb&amp;q=yahoo+weather+design+blur&amp;bav=on.2,or.r_qf.&amp;bvm=bv.47883778,d.d2k&amp;biw=1484&amp;bih=770&amp;um=1&amp;ie=UTF-8&amp;hl=en&amp;tbm=isch&amp;source=og&amp;sa=N&amp;tab=wi&amp;ei=Mge_Uau-IKiu0QXzyYGADw#facrc=_&amp;imgrc=W3T7q2pDARrKhM%3A%3ByIOTpupTmTIpRM%3Bhttp%253A%252F%252Fimg.gawkerassets.com%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.com.au%252F2013%252F04%252Fyahoo-just-made-the-most-beautiful-weather-app%252F%3B960%3B540" rel="nofollow">https://www.google.co.uk/search?client=firefox-a&amp;hs=xQa&amp;rls=org.mozilla:en-US:official&amp;channel=fflb&amp;q=yahoo+weather+design+blur&amp;bav=on.2,or.r_qf.&amp;bvm=bv.47883778,d.d2k&amp;biw=1484&amp;bih=770&amp;um=1&amp;ie=UTF-8&amp;hl=en&amp;tbm=isch&amp;source=og&amp;sa=N&amp;tab=wi&amp;ei=Mge_Uau-IKiu0QXzyYGADw#facrc=_&amp;imgrc=W3T7q2pDARrKhM%3A%3ByIOTpupTmTIpRM%3Bhttp%253A%252F%252Fimg.gawkerassets.com%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.com.au%252F2013%252F04%252Fyahoo-just-made-the-most-beautiful-weather-app%252F%3B960%3B540</a>)</p>
  
  <p>but rather than blurring the entire background I need only the overlayed div background to be blurred - rather than the whole thing, which gives me a headache!</p>
  
  <p>Has anyone managed to acheive a similar result - or have any idea if its possible via Jquery/ Pure Css or a combo?</p>