Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Page header's background image blur effect

  • This topic has 18 replies, 3 voices, and was last updated 1 year ago by Tom.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #393286
    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?

    GeneratePress 1.4
    GP Premium 1.4.3
    #393320
    Tom
    Lead Developer
    Lead Developer
    #393332
    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.

    #393698
    Tom
    Lead Developer
    Lead Developer

    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

    #393973
    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.

    #393990
    Tom
    Lead Developer
    Lead Developer

    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.

    #394000
    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.

    #394562
    Tom
    Lead Developer
    Lead Developer

    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?

    #394598
    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.

    #395092
    Tom
    Lead Developer
    Lead Developer

    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.

    #395107
    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.

    #395671
    Tom
    Lead Developer
    Lead Developer

    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);
    }
    #395725
    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.

    #395935
    Tom
    Lead Developer
    Lead Developer

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

    #395946
    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.

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.