Do you want to add the featured image as background image to Beaver Themer Post Navigation module? You are creating the single post details page layout with Beaver Themer Layout and using the Post Navigation module for prev/next post nav. By default you will get this kind of design for post navigation.

In this article I’m showing how you will get this kind of design (like attached screenshot).

Adding New Image Size: First adding the new image size for post nav. Open the functions.php file of your active theme and add the following PHP snippet. Getting the more details about add_image_size function from here.

I am creating the 800 x 220 px image. You will adjust the image size based on your site design.

Add New Image Size

add_image_size( 'post-nav-thumb', 800, 220, true );

Adding Featured Image to Post Nav

Adding the post’s featured image as background image to Beaver Themer post navigation elements on Single post details. Open the functions.php file of your active theme and add the following PHP snippet.

Add featured image as background image to post navigation elements

/**
 * Add featured image as background image to post navigation elements.
 *
 *
 * @see wp_get_attachment_image_src()
 * @see wp_add_inline_style()
 * @see wp_enqueue_style()
 */
function probb_post_nav_background() {
	if ( ! is_single() ) {
		return;
	}

	$previous = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( false, '', true );
	$next     = get_adjacent_post( false, '', false );
	$css      = '';

	if ( is_attachment() && 'attachment' == $previous->post_type ) {
		return;
	}

	if ( $previous &&  has_post_thumbnail( $previous->ID ) ) {
		$prevthumb = wp_get_attachment_image_src( get_post_thumbnail_id( $previous->ID ), 'post-nav-thumb' );
		$css .= '
			.fl-module-fl-post-navigation .post-navigation .nav-previous { background-image: url(' . esc_url( $prevthumb[0] ) . '); }
			.fl-module-fl-post-navigation .post-navigation .nav-previous a {color: #eee;}
			.fl-module-fl-post-navigation .post-navigation .nav-previous a:hover, .fl-module-fl-post-navigation .post-navigation .nav-previous:hover * { color: #fff; }
			.fl-module-fl-post-navigation .post-navigation .nav-previous:before { background-color: rgba(5, 34, 23, 0.65); }
		';
	}

	if ( $next && has_post_thumbnail( $next->ID ) ) {
		$nextthumb = wp_get_attachment_image_src( get_post_thumbnail_id( $next->ID ), 'post-nav-thumb' );
		$css .= '
			.fl-module-fl-post-navigation .post-navigation .nav-next { background-image: url(' . esc_url( $nextthumb[0] ) . '); }
			.fl-module-fl-post-navigation .post-navigation .nav-next a {color: #eee;}
			.fl-module-fl-post-navigation .post-navigation .nav-next a:hover, .fl-module-fl-post-navigation .post-navigation .nav-next:hover * { color: #fff; }
			.fl-module-fl-post-navigation .post-navigation .nav-next:before { background-color: rgba(5, 34, 23, 0.65); }
		';
	}

	wp_enqueue_style('post-navigation', get_stylesheet_directory_uri() . '/post-navigation.css', array(), time() );
	wp_add_inline_style('post-navigation', $css);
}
add_action( 'wp_enqueue_scripts', 'probb_post_nav_background' );

Details about the used functions

1. wp_get_attachment_image_src()
2. wp_add_inline_style()
3. wp_enqueue_style()

Adding Custom CSS

Need some extra custom CSS for design. Creating the new CSS file “post-navigation.css” (case-sensitive) and saving it into active theme’s folder. Here is the full code of this file:
Post Navigation CSS

.fl-module-fl-post-navigation .post-navigation a,
.fl-module-fl-post-navigation .post-navigation a:hover {
	display: block;
	font-size: 14px; /* Adjust it as per your design */
	margin-top: 30px;
	padding: 7.8461% 7.6923%; /* Adjust it as per your design */
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	z-index: 2;
}

.fl-module-fl-post-navigation .post-navigation .nav-previous:before,
.fl-module-fl-post-navigation .post-navigation .nav-next:before {
	color: #d9d9d9; /* Adjust it as per your design */
	display: block;
	font-weight: 700; /* Adjust it as per your design */
	font-size: 18px; /* Adjust it as per your design */
	font-style: italic;
	height: 100%;
	padding: 7.8461% 7.6923%; /* Adjust it as per your design */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.fl-module-fl-post-navigation .post-navigation .nav-previous:before {
	content: "Previous:";
}

.fl-module-fl-post-navigation .post-navigation .nav-next:before {
	content: "Next:";
}

.fl-module-fl-post-navigation .post-navigation .nav-previous:hover::before,
.fl-module-fl-post-navigation .post-navigation .nav-previous:focus::before,
.fl-module-fl-post-navigation .post-navigation .nav-next:hover::before,
.fl-module-fl-post-navigation .post-navigation .nav-next:focus::before {
	opacity: 0.75;
}

.fl-module-fl-post-navigation .post-navigation .nav-next,
.fl-module-fl-post-navigation .post-navigation .nav-previous {
	background-position: center;
	background-size: cover;
	position: relative;
	text-align: left;
}

.fl-module-fl-post-navigation .pagination .nav-links {
	min-height: 3.2em;
	position: relative;
	z-index: 3;
}