Home Forums General Issues ACF Image as div background in page template


ACF Image as div background in page template

  • 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>';
  • 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;
Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘ACF Image as div background in page template’ is closed to new replies.