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('.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>

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./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>

• javascript
• jquery
• html
• css

2 Answers 2

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:

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

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./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./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>