Background Blur - CSS

Question

Hi I am trying to make this Blur background look like this image, so I would like to know if I can do it using only CSS3 or I need to use Javascript and JQuery:
And if I use only css. How to make blur responsive.

Here is my simple code:

#bg{ background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg'); background-repeat: no-repeat; background-size: cover; } #bg { background-position: center top; padding: 70px 90px 120px 90px; } #search-container { position: relative; } #search-bg { /* Absolutely position it, but stretch it to all four corners, then put it just behind #search z-index */ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 99; /* Pull the background 70px higher to the same place as #bg */ /*background-position: center -70px;*/ -webkit-filter: blur(10px); filter: blur(10px); } #search { position: relative; z-index: 100; padding: 20px; background: rgba(34,34,34,0.75); } #search h2{ color:#ffffff; } 

 <div id="bg"> <div id="search-container"> <div id="search-bg"></div> <div id="search"> <h2>Hello World</h2> </div> </div> </div> 

Answer 1

To blur the whole background

You cannot easily attach an effect to a background image. You need to blur it with the software and set it as a background image.

You can have a blurry background in css with a div that sits behind the content of the yout site, and blur this div like this: http://codepen.io/aniketpant/pen/DsEve

 <div class="background-image"></div> <div class="content"> Your text </div> 

---

Blur after element

You can get this result with the CSS3 background filter:

https://webkit.org/blog/3632/introducing-backdrop-filters/

Answer 2

you can use background-attachment:fixed; and install it also in a blurry container, the background-attachment there to blur both bg in the same place.

example with a pseudo-extra div:

 #bg { background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center top; padding: 70px 90px 120px 90px; } #search-container { position: relative; } #search-container:before {/* add same bg-image with same backgrounds values to match main container */ content: ''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 0; background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center top; background-attachment: fixed;/* make it match #bg position and size */ -webkit-filter: blur(5px); filter: blur(5px); } #search { position: relative; z-index: 1; padding: 20px; background: rgba(34, 34, 34, 0.5); display:flex; } #search h2 { color: #ffffff; margin:auto; } 

 <div id="bg"> <div id="search-container"> <div id="search"> <h2>Hello World</h2> </div> </div> </div>