Blur absolute background whilst retaining solid edges

Question

I have a div element inside and above all other content in the body of a HTML page. It has the ID 'background'.

<body>
    <div id="background"></div>
    <!-- The rest of the page is below #background -->
</body>

The reason the background has its own div and is not simply part of the body is because I have applied a few animations to the background upon load and I don't want these to be reflected on the other elements inside the body.

The CSS for the background div looks like this:

#background {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: url(backgrounds/moon.png) no-repeat center center fixed;
    filter: blur(7px) brightness(0.75);
    -webkit-filter: blur(7px) brightness(0.75);
    -moz-filter: blur(7px) brightness(0.75);
    -ms-filter: blur(7px) brightness(0.75);
    -o-filter: blur(7px) brightness(0.75);
}

To save confusion I have removed the animation CSS as that is not the cause of the problem.

The result of the above HTML and CSS looks like this:

enter image description here

(You might want to open the image in a new tab to see the edge blur clearer)

Around the edge of the image you will see that where they are blurred the white background starts coming through giving it an inner-glow effect. I am trying to remove this to essentially leave the image blurred but maintain sharp edges.

I would highly appreciate anyone helping me around this as it's been holding me back for quite some time. I am also aware there are a few other questions similar to this one, however I hope to have made the problem clearer and I am also using a different method of applying the background (absolute div).

JSFiddle: http://jsfiddle.net/nvUKT/

Can you please post your code at www.jsfiddle.net? So we can try something there. — PM., Dec 10 '13 at 11:47
@PM Yes I shall do that now and edit the question, 2 minutes! — jskidd3, Dec 10 '13 at 11:48

score 8 · Accepted Answer · edited May 23 '17 at 12:25

8

You could cut the edges off, as is done here.

Basically make the image go outside of the view on all sides (perhaps define the left/right/top/bottom or width and height?) and you won't see the glowing edge.

You shouldn't need the overflow:hidden because you are using absolute positioning.

Edit

So, it isn't exactly the most elegant solution, but what you can do to get rid of the blurred edges is to define two background divs, one blurred, and one not. The non-blurry image underneath the blurry one will get rid of the weird edge, and it won't increase the number of HTTP requests, because it's the same image.

HTML

<div id="behind"></div>
<div id="background"></div>

CSS

#behind, #background {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: url(http://placehold.it/1920x1080) no-repeat center center fixed;
}
#background {
    filter: blur(7px) brightness(0.75);
    -webkit-filter: blur(7px) brightness(0.75);
    -moz-filter: blur(7px) brightness(0.75);
    -ms-filter: blur(7px) brightness(0.75);
    -o-filter: blur(7px) brightness(0.75);
}

JSFiddle

edited May 23 '17 at 12:25

Community

1
1

answered Dec 10 '13 at 11:50

randak

1,941
1
12
22

Could you provide an example in code? I can't see this working without physically defining the width and height as integers, I'm using 100%. This might just be me being stupid, however – jskidd3 Dec 10 '13 at 11:55
I will be right back with an example when I get my computer. Can't JSFiddle on mobile. – randak Dec 10 '13 at 11:58
This solution will work if you change your code and put image tag rather than background. – PM. Dec 10 '13 at 12:01
@randak Thanks, appreciate that. I'm having a play and I can't seem to get rid of all the edge blur, just a little. Hopefully you'll have a better result! :) – jskidd3 Dec 10 '13 at 12:09
@randak Sorry for delay, but fantastic answer. Good initiative and logic! – jskidd3 Dec 13 '13 at 21:35

score 1 · Answer 2 · answered Nov 30 '14 at 09:48

To do this in a single <div> you can use the :before and :after CSS selectors, duplicating the background image and only blurring the front-most one. This works well for full-div blurred background images.

.background-image:before, .background-image:after {
        background:
            url("http://placehold.it/1920x1080")
            no-repeat
            fixed
            center top;
        background-size: cover;
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .background-image:before {
        z-index: -2;
    }

    .background-image:after {
        z-index: -1;
        -webkit-filter: blur(7px) brightness(0.75);
        -moz-filter: blur(7px) brightness(0.75);
        -ms-filter: blur(7px) brightness(0.75);
        -o-filter: blur(7px) brightness(0.75);
        filter: blur(7px) brightness(0.75);
    }

score 0 · Answer 3 · answered Jan 11 '17 at 13:35

To avoid duplicating divs, you can do the image bigger than its container, and located it before 0.0.

So:

#background{
    position: absolute;
    top: -10px;
    left: -10px;
    background: url(backgrounds/moon.png) no-repeat;
    background-size: cover;
    width: 102%;
    height: 102%;

    filter: blur(7px) brightness(0.75);
    -webkit-filter: blur(7px) brightness(0.75);
    -moz-filter: blur(7px) brightness(0.75);
    -ms-filter: blur(7px) brightness(0.75);
    -o-filter: blur(7px) brightness(0.75);
}

score 0 · Answer 4 · answered Oct 03 '19 at 02:24

Another option if you wish to avoid creating additional divs is to apply a transform: scale() to the #background element and overflow: hidden to the body or parent element:

body {
    overflow: hidden;
}

#background {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: url(http://placehold.it/1920x1080) no-repeat center center fixed;
    filter: blur(7px) brightness(0.75);
    -webkit-filter: blur(7px) brightness(0.75);
    -moz-filter: blur(7px) brightness(0.75);
    -ms-filter: blur(7px) brightness(0.75);
    -o-filter: blur(7px) brightness(0.75);

    transform: scale(1.05);
}

JS Fiddle

Blur absolute background whilst retaining solid edges

4 Answers4

Edit

HTML

CSS

Linked