Custom featured image as header on blog page

Question

I have created a page called News, which I'm using as the Blog Page. I have inserted an image as featured image in the header (set as background image), but what is displayed there is the featured image of the very last blog post. How can I force WordPress to use the featured image of that specific page instead of a Thumbnail from the blog post?

To be more specific, here is my code (in header.php):

<?php if (has_post_thumbnail( $post->ID ) ): ?>
        <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
        $image = $image[0]; ?>
        <?php else :
        $image = get_bloginfo( 'stylesheet_directory') . '/images/fullscreen.jpg'; ?>
        <?php endif; ?>

        <header style="background-image: url('<?php echo $image; ?>')" > ... </div>

you should check for background image , how does it sets ? via css or <img> try to figure first how does it being display, after that you can use get the featured image of specific page using hardcode page id or slug, also you can show image in header by using echo get_the_post_thumbnail( $post->ID, 'thumbnail' ); it will print html with <img> tag. — Noman

Viktor Sarström Viktor Sarström · Accepted Answer · 2015-10-05T12:04:29

Updated:

You need to define the page ID outside the loop.

$page_id = get_query_var('page_id');

<?php if (has_post_thumbnail( $page_id ) ) : ?>

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $page_id ), 'single-post-thumbnail' );

<header style="background-image: url('<?php echo $image; ?>')" > ... </div>

<?php endif ; ?>

Custom featured image as header on blog page

2 Answers