0

I have a onepager-scrolldown website with a fullscreen header-image followed by several sections. Now, I decided to apply background-images to some of the sections. To make clear what structure I have, here is a simple code sample with the header followed by one section:

HTML:

<body>

    <header></header>

    <section class="bg-test">
        <div class="container">
            <div class="row">
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
            </div>
        </div>
    </section>

</body>

CSS:

html,
body {
  height: 100%;
  width: 100%;
}
header {
  position: relative;
  width: 100%;
  min-height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center top;
  background-image: url('../img/header.jpg');
}
.bg-test {
   background-image: url('../img/header.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

Now I would like to add filter properties (such as a blur filter) to the background-image of the section (obviously only to the image and not to the text in front of the image). In order to achieve that, I tried to follow the approaches in this topic:

How to apply a CSS3 Blur Filter to a background image

I tried to adapt the code samples to my situation (only section instead of whole page), however couldn't make it work. I believe it is due to the interaction with the fixed header image.

Would someone be so kind and help me out with that? Thank you!

tinymarsracing
  • 577
  • 1
  • 4
  • 12

1 Answers1

0

You can add the background on the :before, and put that behind the content:

.bg-test {
   position:relative;
   background:none;
}
.bg-test:before {
   content:"";
   display:block;
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   z-index:-1;

   /* Add Blur */
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);
   filter: blur(5px);

   /* Background */
   background-image: url('../img/header.jpg');
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
  -o-background-size: cover;
}
razemauze
  • 2,666
  • 1
  • 16
  • 28