Using Images in the Header with "blur"

Question

I'm trying to make my background image blurred.. to then have text, buttons on top of it.. but blur is also blurring the text and buttons and I'm not sure how to separate the two.

header {
   background: url("street-238458.jpg") no-repeat center;
   -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
   filter: blur(5px);
   background-size: 100% 100%;
   height: 630px;
}

<header>

<div class="container-fluid">
<div class="text-center">
<h1 class="heading">My h1 is here... blah blah</h1>
<p>We help people out, every day.</p>
<button class="btn btn-lg btn-danger heading" href="#">This is the button</button>
</div>
</div>

</header>

Kindly refer this: https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image — pradeep kumar, Dec 28 '17 at 04:09
You can separate the header into 2 parts, the background part and the content part. Then you can blur the background. — WebDeg Brian, Dec 28 '17 at 04:13
Possible duplicate of [How to apply a CSS 3 blur filter to a background image](https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image) — Kaiido, Dec 28 '17 at 04:13

score 0 · Answer 1 · answered Dec 28 '17 at 04:16

0

You can have 2 different containers for your header, so you can style the background container without affecting the content. Check out the reference in the comments.

answered Dec 28 '17 at 04:16

WebDeg Brian

802
1
7
21

score 0 · Answer 2 · answered Dec 28 '17 at 04:17

This pen should be what your looking for. Credit to respective owner. The trick is to have two separate containers, the outer container should have background image.

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  width: 1200px;
  height: 800px;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

Using Images in the Header with "blur"

2 Answers2