Cover block as full screen featured image

Hi @adrean – If you’re trying to display the featured image of this post in the background of the entire post, you could give this code a try in the site-wide custom CSS editor:

.postid-2896 {
    background-image: url("https://www.adrean.de/wp-content/uploads/2021/11/essen_klein.jpg");
    background-size: cover;
}

Do keep in mind that this isn’t going to look great on larger screens, since your original image is only 580px wide, so it’s being stretched out a great deal and will appear extremely pixillated. Your black text also won’t be readable against the darker parts of the image.

With this method, you’d need to repeat this CSS for every post, changing the URL and post ID each time. Perhaps there is a plugin that would do this programatically, you could also take a look.

If I’ve misunderstood your goal, please provide more details and I’ll be glad to have another look.

Hi @zoonini

thank you for the quick answer. But my problem is a different one. Hard to explain for me. I would like to set the featured image kind of responsive. So that on mobile as well as on desktop, when you open the post, the whole display is covered with the featured image (with the title and nav bar within). Then the user can scroll down and there comes the text etc.

A bit like this design from the twentig plugin:

https://demo.twentig.com/lutece/

I hope it is more clear now, don’t hesitate to tell me if not.

Happy easter and have a great day

Thanks @adrean – I think I understand better what you’re looking for.

I’d suggest experimenting with adding a Cover block to your Single template. You can choose to display the post’s featured image as the cover block’s background picture, by clicking “Use featured image” as you see here:

Within the cover block, add any other elements you want to have there, such as the Post Title block.

Set the “Minimum height of cover” to be 100vh (100% of the viewport height).

Let me know how it goes!

Thank you @zoonini

The “viewport height” is new to me and very helpful.

Still I am struggling to set my main header (the same as on every other site on my website) into the cover. Well, I can put the header in, but when I position it to the upper middle content position of the cover (so that the header sticks to the top, at the same position as on every other site of my website) it changes the width from wide to narrow.

Only when i place the cover content in the very middle of the cover, I can freely choose the sizes of the header and the page title independently. Now I have set the cover to full screen (100% vh) and put a spacer between the header and the page title at 75% vh.

But now the height of the cover varies depending on the size of the page title. Also the header does not (on pages with short title) stay at the same position (Top) as of every other page. Like on this page: (If you are on the post and click the site title you will see that the header on homepage is at a higher position than the header of the linked blog post).

https://www.adrean.de/anleitungen/selinatur/kaffeefilter/

To provide a clear question: Do you know how i can stick the header to the top of the cover block while retaining wide width? (So that the header sticks to a fixed position no matter what and i can work from there down, for instance with a non responive seperator block).

Once again a bit hard for me to explain and even harder to understand. Really puzzling me. I think I will try some things and experiment with it. No pressure.

Have a great day,

Adrean

Hi @adrean –

Do you know how i can stick the header to the top of the cover block while retaining wide width

Did you manage to get this sorted? When I visit the page above and compare it to a couple of other pages on the site, the navigation bar appears in the same spot everywhere, and the Cover block’s featured images appears at full width.

If you still need help, perhaps you could sketch out what you’re looking for.

Hi @zoonini

No, sadly I didn’t figure it out. I am using the work around as described above. The header is just slightly of, just a view millimeters…

Don’t worry. I will work something out. Luckily the Theme offers plenty alternatives to design something nice.

Thank you. If I will give it another try I might reach out again. Otherwise you can mark this one as resolved. Thanks a lot and have a great day.

Sounds good. ?? Feel free to start a new thread for other questions.