If you're calling a dynamic css inline style does that div have to be in the loop?

Question

In the code below i reference "the_field( 'bg_img' )" within my first container div. The reason i do this is because i created a custom field (within a CPT) that allows the admin to change that containers bg color from the admin panel.

However when i load the page it doesn't work so i was wondering if:

a) it's because it's above the query b) or because it needs to be within the loop

I have tried including this div within the loop but then it creates duplicate divs embedded within duplicate divs, etc, etc.

So i'm wondering if you can call functions outside of loops, which i'm guessing no. The function btw is unique to the ACF(Advanced Custom Fields) plugin and it's calling a custom field within my 'neighborhoods' CPT.

So if i can't call my function outside of a loop then how do i keep this div from not repeating so many times within the code, does it have to do with conditionals or limiting posts?

Thanks.

 <div class="bg-img-default <?php the_field( 'bg_img' ); ?>"></div>

<div class="container-main">

    <?php


        $args = array(
            'post_type' => 'neighborhoods',
            'posts_per_page' => 1,
            'meta_key' => ''
            );

        $news_query = new WP_Query( $args );

    ?>

    <?php if ( $news_query->have_posts() ) : while ( $news_query->have_posts() ) : $news_query->the_post(); ?>

         <!--COL 1-->

      <div class="col-block">

        <h2><span class="bold">latest</span> <span class="font-condensed">news</span></h2>

      </div>

     <!--COL 2-->

      <div class="col-block">

        <h2><span class="bold">local</span> <span class="font-condensed">events</span></h2>

        <?php the_field( 'single_neighborhood_local_events' ); ?>

      </div>

      <!--COL 3-->

      <div class="col-block-last">

        <h2><span class="bold">listings</span></h2>

        <?php the_field( 'listings' ); ?>

        <a href="<?php get_permalink(); ?>">Read more</a>

      </div>

    <?php endwhile; endif; ?>

    <?php wp_reset_query(); ?>

Answer 1

The way i formatted this question is wrong, i was trying to embed a dynamic CSS property value inline within a div referencing a color value from a custom field. In this particular case yes i did have to include the div, with the inline style that was calling the value of the property, within the loop otherwise it wouldn't retrieve the data(color value) dynamically.

 <?php

  $args = array(
    'post_type' => 'neighborhood',
    'posts_per_page' => 1,
    );

  $the_query = new WP_Query( $args );

  ?>


  <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

    <div class="container-hdr" style="background-color: <?php the_field( 'bg_clr' ); ?>"> <!--the_field(); is a specific function to the ACF Advanced Custom Fields plugin that is referencing the post type 'neighborhood'-->

This still doesn't solve another problem that i'll be posting soon, that is how do i make the background color dynamic based on different posts that may have custom colors entered by a color picker. This option here will allow you to change the background color from the admin but make a global change based on any number of header templates that you create.