css blur technique only for the background

Question

i want to blur the background image of this html code using css3 filter and please provide explanation.

    <!DOCTYPE html>
<html>
<head>
    <title>Student-login</title>
    <link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
    <style>
        body{

            background-image: url("background.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
        }

    </style>
</head>
<body>
    <div class="main-form">
    <h1>Hello</h1>
    </div>
</body>
</html>

But the content in this will not get blurred.

because css3 has the option to blur out any images which is not blur.using photoshop to make every picture blur is too much hassle i guess @Matt Ball — Ethereal soul, Jun 13 '15 at 23:25
I'm voting to close this question as off-topic because the OP has not provided any attempt to solve his problem — Michael Mullany, Jun 14 '15 at 00:51

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

You have to use two different containers, take a look here it will help you:

https://stackoverflow.com/a/20039965/4298050

edited May 23 '17 at 11:50

Community

1
1

answered Jun 13 '15 at 23:33

Samir B

152
1
2
13

it said there has to be two container can i use one container as body and another as div? @samir – Ethereal soul Jun 14 '15 at 17:53
if you put a blur on the body all your content will be blurred, i think the best solution is to make a div that doesnt comport anything exept blurred elements, and another normal that contains your content @Ethereal soul – Samir B Jun 15 '15 at 09:33

css blur technique only for the background

1 Answers1