0

I have a webpage with a markup looking something like this: 

<body>
    <div>Some content</div>

    <div class="login">
        <form>
            <div>Some form elements</div>
        </form>
    </div>

    <div>Some content</div>
</body>

My body element has a background image on it.

I want the background of the .login div to bee a blurred representation of the underlying body's background image.

The problem I had with the solutions found online is that set the background of the blurred div to the same as the body. The problem with this is that I use background-size: cover on the body element so I can't position the background of the blurred div in the correct position.

Another problem was that the content of the blurred div always had the blurred background overlayed.

Is the a way to achieve this either using plain css or with the help of javascript?

strnmn
  • 555
  • 1
  • 6
  • 30
  • Try this answer here http://stackoverflow.com/questions/19375311/div-blur-of-part-of-backgroung-image-with-css?rq=1 – cocoa Sep 23 '15 at 15:41

1 Answers1

0

You can't with pure css but it can be achieved with htmltocanvas as described here.

Underfrog
  • 1,307
  • 11
  • 14