Outputting custom field on home.php not outside of blog list

Question

I'm not exactly sure how to put this but I'm going to try. let me know if you need more/better details.

I have a blog listing page using home.php and a blog post page using single.php.

both of these have 1 custom field applied that is an image field that places a background image for the banner of the page. Also the title field.

on the single posts page, when I set a background image for the post using the custom field it works. the page's banner has the appropriate background image, and the title is correct.

On the listing page though, even though the page I have set in the reading settings to host the blog listing page has the title and background image fields set to something specific, it does 1 of two things:

1. if I do not set the loop around the banner and only around the set of code repeated for each blog post, the title and background image of the listing page use the most recent post for that page (i.e. 9 posts per page, 18 posts total so two pages. these fields take the most recent from each page).

2. If I set the loop around the banner, reset the loop, then loop around the blog code, it displays the list of blogs just fine, but it repeats the banner for each blog and each banner displays the background image and title for each blog on that page (i.e. 9 blogs on listing page, 9 banners).

Short of hard coding the banner and title I am at a loss as to how to separate the banner to work out of the loop and pull in the data set on my blog page.

here is the website: http://idorigin.info/blog/

Here is my code for the home.php:

    <?php
    /*
    Template Name: Blog Listing Page Template
    */
    ?>

<?php get_header(); ?>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>    
 <?php include 'banner.php'; ?>

    <?php endwhile; else : ?>
        <p><?php _e( 'Sorry, no posts found.' ); ?> </p>
    <?php endif; 

wp_reset_query();

?>
<section class="blog">  
    <div class="blog_list">
        <div class="page_center medium">
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 
            <div class="blog_item">
                <div class="page_center">
                            <a class="blog_item_img" style="background: url('<?php the_post_thumbnail_url(); ?>') center center no-repeat;" href="<?php the_permalink(); ?>">

                    </a>
                    <div class="blog_item_info">
                        <div class="blog_item_date-topics">
                            <?php the_time('M d, Y'); ?> | <?php the_category(', '); ?>
                        </div>
                        <div class="blog_item_title">
                            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        </div>
                        <a class="orange_button" href="<?php the_permalink(); ?>">Read More</a>
                    </div>
                </div>
            </div>

        <?php endwhile; else : ?>
                <p><?php _e( 'Sorry, no posts found.' ); ?> </p>
        <?php endif; ?>

        </div>

        <div class="pagination">

        <?php 
            $prev_page = get_previous_posts_page_link();
            $next_page = get_next_posts_page_link();
        ?>
        <?php if( $prev_page ) { ?>

            <a class="previous-list" href="<?php echo esc_url( $prev_page ); ?>">Previous</span>

        <?php } else { ?>

            <span class="previous-list">Previous</span>

        <?php } ?>

             | 

        <?php if ( $next_page ) {?>

            <a class="next-list" href="<?php echo esc_url( $next_page ); ?>">Next</a>

        <?php } else { ?>

            <span class="next-list">Next</span>

        <?php } ?>

        </div>

    </div>
</section>

<?php get_footer(); ?>

banner.php file:

<section class="page_banner inner_banner" style="background: url(<?php echo get_post_meta( $post_id , 'banner_image', true )  ?>) center center no-repeat;">
    <div class="overlay">
        <div class="page_center large">
        <?php $blog_title = get_the_title( get_option('page_for_posts', true) ); ?>
            <h1><?php echo $blog_title; ?></h1>
            <p><?php the_field('header_tag_line'); ?></p>
        </div>
    </div>
</section>

Answer 1

I have two issues above that are related.

1. php the_title() is outputting the most recent blog post title on the blog list page within my banner (or creating a banner for each blog title on the list page depending on the described circumstance).

2. My advanced custom field used to insert an img url into the background attr of some inline styling is acting the same.

From what I have gathered, both of these issues are caused because the index (blog list) page does not have a $page_id or something to that effect. This make since because it isn't technically a page I guess.

for the blog title I used:

<?php $blog_title = get_the_title( get_option('page_for_posts', true) ); ?>
<h1><?php echo $blog_title; ?></h1>

This retrieved the title for the page_for_posts

As far as using an advanced custom field (or regular custom field?) on the index page, same issue but different solution:

<?php 
$page_id = ( 'page' == get_option( 'show_on_front' ) ? get_option( 'page_for_posts' ) : get_the_ID );
?>

and then

<section class="page_banner inner_banner" style="background: url(<?php the_field('banner_image', $page_id); ?>) center center no-repeat;">

And this worked.

I feel kind of foolish trying to explain something I only slightly understand so if someone could make this more understandable I will choose your answer as correct.