ACF Image as div background in page template

• jonburr

• September 20, 2018 at 11:34 pm

I’d like to add a hero image with title overlay in a page template.
I’m trying to figure out how to use an ACF image as a background image for a div containing the title.
This is as far as I got –

echo '<div class="template-hero" style="background-image: (???)> <h1>'the_title();
echo '</h1>';

I have the hero image showing OK on the page – but I need to put the title over it.

hero template code that’s working to retrieve the image:

// Get hero image
$image = get_field('template_top_image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)

if( $image ) {

	echo wp_get_attachment_image( $image, $size );

}
echo '</div>';

• jonburr

• September 21, 2018 at 12:13 am

I think I found a simpler way to do this –

// Get the page title
echo '<h1 class="template-title">';
$title = the_title();
echo '</h1>';

Then add css to put it over the hero image:

/* Custom Template Pages
---------------------------------------------------------*/
.template-title {
position: relative;
top: 70%;
z-index: 100;
color: white;
text-align: center;
font-size: 50px;
font-size: 5rem;
}