Docs

[yhshin1020]

Hey,

I want to have anything under the header to be blurred. How do i achieve this?

I know this can be done through css: http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/

but i just don’t know how to implement the same thing on my website header.

Could you perhaps help me out?

Thanks!

[yhshin1020]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

You can do it like this, first, let’s have a content like this,

<div class="blurred-background">
Your content here
</div>

You can create multiple contents just as long as they are wrapped within <div class="blurred-background"></div>

Then add this CSS to Admin > Appearance > Customizer > Custom > CSS just once.

  .blurred-background {
position: relative;
padding: 20px;
}
.blurred-background:before {
z-index:0;
position: absolute;
background: rgba(0,0,0, 0.2);
content:"";
display: block;
top:0;
left:0;
right:0;
bottom:0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

Hope it helps.

[yhshin1020]

This reply has been marked as private.

[Rue Nel]

Hello There,

Please add the blur in the container instead. You may update the code and use this instead:

.legislationhead .x-container.max.width.wpb_row.mpc-row:before {
  content: "";
  width: 100%;
  height: 100%;
  z-index:0;
  position: absolute;
  background: rgba(0,0,0, 0.5);
  content:"";
  display: block;
  top:0;
  left:0;
  right:0;
  bottom:0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

Hope this helps.

[yhshin1020]

This reply has been marked as private.

[Christopher]

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[yhshin1020]

This reply has been marked as private.

[Nabeel A]

Hi again,

Try replacing the previous code with this one:

.legislationhead .x-container.max.width.wpb_row.mpc-row:before {
    content: "";
    width: 100%;
    height: 122px;
    z-index: 0;
    position: absolute;
    display: block;
    top: -76px;
    left: 0;
    right: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

Let us know how this goes!

[Author]

Posts