Using featured image of blog archive page

Question

On my custom wordpress theme, I am using the featured image thumbnail for all of my pages to be the header of the page.

I've created a page called "blog" and using it as the archive ( via settings -> reading -> selecting "blog" for post display page ) reading, but when I try to use the featured image of that page, it tries to display ALL of the featured images from the blogs, not just my one archive page how I want.

I'm pretty sure it's a matter of altering the if statement to only show the thumb of the archive page, but I'm not sure how.

Here is my code on index.php

<?php get_header(); ?>
        <section>
            <?php if ( have_posts()) : while ( have_posts() ) : the_post(); ?>
            <!-- post thumbnail -->
            <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
            <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                <a class="page-thumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <div class="page-thumb" style="background-image:url('<?php echo $url ?>');"></div>
                </a>
            <?php endif; ?>
            <!-- article -->
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <h1 class="page-h1 animate-reveal">
                        <?php the_title(); ?>
                    </h1>

                </article>
            <!-- /article -->

            <?php endwhile; ?>
            <?php else : ?>
            <!-- article -->
            <!-- /article -->
            <?php endif; ?>

        </section>
    <main role="main" aria-label="Content" class="page-bg page-margin">
        <!-- section -->
        <section>

            <h1 class="archive-h1">News</h1>

            <?php get_template_part( 'loop' ); ?>

            <?php get_template_part( 'pagination' ); ?>

        </section>
        <!-- /section -->
    </main>


<?php get_footer(); ?>

EDITS using answer #1

complete index.php file below

 <?php get_header(); ?>

    <main role="main" aria-label="Content" class="page-bg page-margin">



        <!-- section -->
        <section>
            <?php 
                $page_for_posts = get_option( 'page_for_posts' ); 
                if ($page_for_posts && has_post_thumbnail($page_for_posts)) {
                    $thumb_id = get_post_thumbnail_id( $page_for_posts);
                    $url = wp_get_attachment_url( $thumb_id );
                if ( have_posts()) : while ( have_posts() ) : the_post(); ?>
            <!-- post thumbnail -->
            <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
            <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                <a class="page-thumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <div class="page-thumb" style="background-image:url('<?php echo $url ?>');"></div>
                </a>
            <?php endif; ?>
            <!-- article -->
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <h1 class="page-h1 animate-reveal">
                        <?php the_title(); ?>
                    </h1>

                </article>
            <!-- /article -->

            <?php endwhile; ?>
            <?php else : ?>
            <!-- article -->
            <!-- /article -->
            <?php endif; ?>

        <?php } ?>
            <h1 class="archive-h1">News</h1>

            <?php get_template_part( 'loop' ); ?>

            <?php get_template_part( 'pagination' ); ?>

        </section>
        <!-- /section -->
    </main>


<?php get_footer(); ?>

Answer 1

You need to grab the ID of the page you've set as your Posts page in Settings > Reading in order to access its properties. To do that, check for the page_for_posts option, which returns the ID:

$page_for_posts = get_option( 'page_for_posts' ); 
if ($page_for_posts && has_post_thumbnail($page_for_posts) {
    $thumb_id = get_post_thumbnail_id( $page_for_posts);
    $url = wp_get_attachment_url( $thumb_id );
    //... the rest of your featured image display stuff here
}

This code should be placed outside of (before) the index.php loop which displays all your blog posts & their featured images, it doesn't replace it.

You can use this $page_for_posts ID to display other elements of that page, too, including the title, eg: echo get_the_title($page_for_posts);

EDIT:

Try this for your index.php; I'm assuming your actual posts loop is inside the 'loop' template part. This will just dump out an <img> tag at the top of the Posts page with that page's featured image.

<?php get_header(); ?>

    <main role="main" aria-label="Content" class="page-bg page-margin">

        <!-- section -->
        <section>

        <?php 
        // Get the ID of the page set to Display Posts in Settings > Reading
        $page_for_posts = get_option( 'page_for_posts' ); 

        // If that page ID exists, and that page has a Featured Image....
        if ($page_for_posts && has_post_thumbnail($page_for_posts)) {

            // Get the ID of that page's Featured Image
            $thumb_id = get_post_thumbnail_id( $page_for_posts);

            // Display that image
            echo wp_get_attachment_image($thumb_id);
        } 

        // Display the page title if set; else use 'News'              
        if ($page_for_posts) {
          echo '<h1 class="archive-h1">' . get_the_title($page_for_posts) . '</h1>';
        } else {
          echo '<h1 class="archive-h1">News</h1>';
        }
        ?>

            <?php get_template_part( 'loop' ); ?>

            <?php get_template_part( 'pagination' ); ?>

        </section>
        <!-- /section -->
    </main>


<?php get_footer(); ?>

I use this function to output that featured image: wp_get_attachment_image() That function will output an <img> tag with scrset attributes for responsive images. If you'd rather have the page's featured image be displayed as a background image, you could still use wp_get_attachment_url() to get just the URL and use your <div> to display it, like so:

<?php $url = wp_get_attachment_url($thumb_id); ?>
<div class="page-thumb" style="background-image:url('<?php echo $url ?>');"></div>