Blur part of css background image

Question

What is the best way to blur the first 70 pixels of my background image? The background image is in the body, and I have a panel with opacity .08, with which I want to blur the background. What is the best way and how to do it?

Answer 1

Alternatively, you can achieve the same effect using javascript - better CSS - as shown in this JSFiddle

var blurredDiv = document.createElement('div');
blurredDiv.className = 'blurry';
document.body.appendChild(blurredDiv);

body {
    margin:0;
    padding:0;
    background-image:url('//cdn01.wallconvert.com/_media/wallpapers_2880x1800/1/4/silver-bmw-i8-39331.jpg');
    background-size:cover;
}
.blurry {
    width:calc(100% + 6px);
    height:73px;
    position:fixed;
    top:-3px;
    left:-3px;
    background-image:url('//cdn01.wallconvert.com/_media/wallpapers_2880x1800/1/4/silver-bmw-i8-39331.jpg');
    background-size:cover;
    background-position:0 3px;
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

Run codeHide result

Where are the following CSS lines:

width:calc(100% + 6px);
height:73px;
position:fixed;
top:-3px;
left:-3px;
background-position:0 3px;

div 70px , , background-position:0 3px; 3px, top:-3px .blurry div

Answer 2

( ::before , ), 70 100% ( ). , , .

html, body {
    height: 100%;
    margin: 0;
}

div {
    height: 100%;
    width: 100%;
    background-image: url(http://www.opaletch.co.uk/photos/rotating-patterns/p1921ri7pv1bb41m95du15sa1ce55.jpg);
}
div::before {
    content: ' ';
    display: block;
    width: 100%;
    height: 70px;
    background-image: url(http://www.opaletch.co.uk/photos/rotating-patterns/p1921ri7pv1bb41m95du15sa1ce55.jpg);
    filter: blur(20px);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
}

<div></div>

Hide result

,

: , - ,

. JSfiddle.

---

"" .

, <div> <div>. <div> div, . , .