Customize the Post Header of a Single Post in the Beaver Builder Theme

functions.php

// Add our custom Post Header section on Single Posts ONLY
add_action( 'fl_after_header', 'bb_do_single_post_top_section' );
function bb_do_single_post_top_section() {
	// If the current page loading is a Single Post
	if(is_single() && get_post_type( $post ) == 'post'){
		echo '<div class="bb-top-post-header">';
		// get the value of the ACF background file we uploaded to the field. 
		// If you named your field a different name to $bb_page_title_bg, replace this with your field name that you used
		$bb_page_title_bg = get_field('bb_single_post_background_image');
	    		
	    		echo '<div class="gradient-fade"></div>';
	    		
	    		// the below outputs the field. As the BB theme runs on Boostrap, we're using some
	    		// bootstrap grid classes to keep the content of this Page Title in the same grid as the other content on the page
	    		?> 
	    		<div class="bb-page-title"><div class="container"><div class="row"><div class="col-md-12">
	    		
	    		<header class="fl-post-header">
	    			<?php // output the Yoast SEO Breadcrumbs
	    				if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p id="breadcrumbs">','</p>'); } 
	    			?>
				<h1 class="fl-post-title" itemprop="headline">
					<?php the_title(); ?>
					<?php edit_post_link( _x( 'Edit', 'Edit post link text.', 'fl-automator' ) ); ?>
				</h1>
				<?php FLTheme::post_top_meta(); ?>
			</header><!-- .fl-post-header -->
			
			</div></div></div></div>
	    		
	    		<?php // if there is an image uploaded into our new custom ACF background field
	    		if($bb_page_title_bg){
	    			// set the URL of the variable $bb_page_title_bg_url to the URL value of of image field
	    			$bb_page_title_bg_url = $bb_page_title_bg[url];
	    		} else {
	    			// If there is no background image set on the current page or post
	    			// we set the default image to the URL below. Change this to whatever you want your
	    			// default image to be for the background
	    			$bb_page_title_bg_url = ''; //add the URL to the default image you want to use if there is not an image set 
	    		}
	    		// now we output the CSS required to add the background to the image
	    		echo "<style>
		    		.bb-top-post-header{background:url('$bb_page_title_bg_url') no-repeat center top;background-size:cover;background-attachment:fixed;}
	    			</style>";
	    	echo '</div>';
    	}
}