0
294
ViewsBackground Blur - CSS
Hello I try to make this background Blur like this image so I'd like to know if I can do it using CSS3 only or I need to use Javascript & Jquery:
And if I will use css only How to make the blur is responsive.
Here 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'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>2 answers
Answer question0
To blur all the background
You can't easily attach effect to a background image. You should blur it with a software and set it as background-image.
You can have a blur background in css with a div placing behind yout site content, and blur this div like that : http://codepen.io/aniketpant/pen/DsEve
<div class="background-image"></div>
<div class="content"> Your text </div>
Blur behind an element
You can get this result with CSS3 backdrop filter:
0
you can use background-attachment:fixed; and set it also in the blured container , background-attachment is there to set both bg on the same spot, one can be blured.
example with a pseudo instead 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>