[Support request] Page header's background image blur effect

[themedleb]

Hello,

I want to make the page header’s background image with blur effect, I tried to paste the following code in many related classes:

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

But it always affect everything including the page header’s content (post-title, post-date, post-author, …), can you please tell me what is the class (or whatever) I should use the code with?

[Tom]

This thread might help: https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image

[themedleb]

Yeah, it’s from there I took the code I showed you before, and tried to paste it in many classes (each time = one class) and set the z-index for each as specified in the link you gave me, but always resulted to blur everything in the page header, including the page header’s content, but I just need to know what is the specific class (or whatever) is responsible of showing the featured image in the page header so I can apply the blur effect and z-index in it.

[Tom]

I think that’s the thing, it can’t be done with the current implementation.

You need to remove the current background image, then apply this method using the .page-header-content class: https://stackoverflow.com/a/33091315/2391422

[themedleb]

Thank you, If I remove the background image, I think there will be nothing to apply the blur effect on, so no need for that effect.

Regards.

[Tom]

The image would need to be applied to an element inside the content area:

<div class="image-container"></div>
Content here

So the image would be applied to that image-container element using the method in that thread.

[themedleb]

Okay, so what should I do as steps? I’m confused now, and so hyped to make this work as well, please just give me codes and show me where to put them, I’m so thankful for that.

[Tom]

Looking at it more, those solutions require you to use fixed or absolute positioning, which is pretty hacky.

Why not just apply the blur to image itself in an image editing program?

[themedleb]

I thought about it before, but the image will look blurry everywhere in the website, I just need this effect only in singular posts, where the image is under text/infos (post-title, post-author, post-date …), so these infos will look clear on the top of the image.

If I need to replace some CSS (or PHP) in the theme files to get it work, I already have no problem with that, but if it is tiring and time consuming, we can just avoid it and move on.

If you have time and can help me, I would appreciate it so much.

Thank you.

[Tom]

Why not just use that one image on that single page? No need to use it everywhere.

You can also use the background color overlay option to make text more readable.

[themedleb]

Because the image I am talking about is the featured image, every post will have a different one, if I made one of them blurry (using Photoshop) every other featured image should be the same following the same norm/standard, which will result a page full of blurry images (the page where all posts should appear, in columns/masonry like search results page), that’s why the only option I have is to apply blur effect only on featured images of singular posts, so no image will be affected when all posts appear in columns/masonry like the search results page.

I know about the background color overlay option, but I want my website to be a little bit unique and fancy, just so you have an idea of what the header page content looks like with blur effect and without, here is an example:

With blur
With background color overlay

Regards.

[Tom]

You could try this..

Remove the image from your Page Header.

Then add this CSS to the page:

.page-header-content {
  overflow: auto;
  position: relative;
}

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

  display: block;
  background-image: url('URL TO IMG HERE');
  background-size:cover;
  width: 100%;
  height: 100%;

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

[themedleb]

Okay, but according to this code of CSS, I will manually set the same background image for all posts, right? (please correct me if I’m wrong). But what’s supposed to be is: each and every post should have its own featured image.

[Tom]

That’s correct. The set up you’re wanting isn’t possible using the regular options – you need to use CSS.

[themedleb]

I tried all the CSS codes your gave me. Anyway, I think this is not achievable at the moment as long as the background featured image of the Page Headers is merged with Page Headers content. Thank you Tom for your precious time, I hope I have the ability to make Page Headers with blur effect in the future.

Thanks.

[Author]

Posts