Archived topic
how to blur featured image in header
6 replies · Started by sparkle on December 12, 2022
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);}
Hi there,
what happens if you try this:
.featured-image-in-header {
filter: blur(8px);
position: relative;
z-index: -1;
}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
Awesome - that makes my day to hear that :) We're glad we can be of help!!
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?
OH nevermind. i got it.
div.featured-image-in-header img {width: 100vw;}
Glad to hear that :)
