Greetings! I'm attempting to achieve a background blur effect similar to the image shown. I am curious if this can be accomplished using only CSS3 or if JavaScript & Jquery are necessary for implementation:
If CSS alone is sufficient, how can I ensure that the blur effect remains responsive?
https://i.sstatic.net/myUxs.jpg
Below is the code snippet I have created:
#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's 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's */
/*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>