[Resolved] how to blur featured image in header

[sparkle]

i want our featured image in the background and blurred behind the same image in the post. i’m almost there.

i used this php and made a after header hook, i left the settings as is for my post. so far so good. .

https://generatepress.com/forums/topic/how-can-i-make-featured-images-full-width/#post-597427

but when i apply this css (to the div or the img), the header image comes to the front and overlaps the content. why?

div.featured-image-in-header {filter: blur(8px); -webkit-filter: blur(8px);}

[David]

Hi there,

what happens if you try this:

.featured-image-in-header {
    filter: blur(8px);
    position: relative;
    z-index: -1;
}

[sparkle]

oh that works perfectly. thank you. i didn’t realize you could do negative numbers with z-index.

thanks so much for all you do. for every one forum ticket i enter, i probably use 20 you’ve already answered. <3

[David]

Awesome – that makes my day to hear that 🙂 We’re glad we can be of help!!

[sparkle]

one little thing… i adjusted my hook to do the same for pages, but the featured-image-in-header is not stretching the image to 100%. why not?

[sparkle]

OH nevermind. i got it.

div.featured-image-in-header img {width: 100vw;}

[David]

Glad to hear that 🙂

[Author]

Posts