CODEWITHSUNDEEP
cssblur
s.k.paul
s.k.paul

Reputation: 7291

Full page responsive background image with blur effect

I am trying to use an image as responsive full page with blur effect. Here is my css-

    body {
    padding: 0;
    margin: 0;
    color: #000;

    background-image: url(images/home-page-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;

    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

But blur effect is not working on background image, rather the whole contents are getting blurred.

Any help?

Upvotes: 0

Views: 1997

Answers (3)

Zoran P.
Zoran P.

Reputation: 880

To make this work you should do the following:

  1. Background image should be in an absolutely positioned div, which will be behind your content. Then you can blur the whole div and only image will be blurred (as it will be the only content in the div)

  2. Overlay the background image div wrapper with your content. 

     #background-div{
 padding: 0;
 margin: 0;
 color: #000;

 position:absolute; 
 top:0; height:100%; width:100%;
 left:0;
 z-index:1;

 background-image: url(images/home-page-bg.jpg);
 background-position: center center;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 background-color: #464646;

 -webkit-filter: blur(5px);
 -moz-filter: blur(5px);
 -o-filter: blur(5px);
 -ms-filter: blur(5px);
 filter: blur(5px);

    }

Upvotes: 2

0x58
0x58

Reputation: 427

Here is a working example:

<html>
<head>
    <style>
        .back:before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: -1;
            background-image: url(images/home-page-bg.jpg);
            background-position: bottom;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;  
            height: 100%;
            filter: blur(5px);
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
        }
    </style>
</head>
<body>
    <div class="back">
        <p>Lorem ipsum</p>
    </div>
</body>

Upvotes: 0

Jason Bassett
Jason Bassett

Reputation: 1291

This is happening because you've applied those blur stylings to the <body> tag. Try something like this: 

.background-image:before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: -1;
   top:0;
   background-image: url('http://webneel.com/wallpaper/sites/default/files/images/04-2013/tropical-beach-wallpaper.jpg');
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;  
   height: 100%;
   filter: blur(5px);
   -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
        -o-filter: blur(5px);
       -ms-filter: blur(5px);
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>

<body>
<div class="background-image">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</body>
</html>

Upvotes: 5

Related Questions