How to add Page Title Background with ACF

Step 1

Install and activate Advanced Custom Fields

Step 2

Go to Custom Fields

Add a header_background field group in your site.

Step 3

// Adds custom image size for site header background image.
add_image_size( 'header-image', 1600, 350, true );

add_action( 'wp_enqueue_scripts', 'custom_header_background' );
/**
 * Sets `header_background` as URL of .site-header.
 */
function custom_header_background() {

    // if we are not on a static Page, abort.
    if ( ! is_singular( 'page' ) ) {
        return;
    }

    // get the custom field's ID.
    $image = get_field( 'header_background' );

    // URL of image custom field in a specific size.
    $url = wp_get_attachment_image_url( $image, 'header-image' );

    if ( ! empty( $image ) ) {
        $css = '
        .site-header {
            background-image: url( ' . $url . ' ) !important;
        }';

        wp_add_inline_style( 'anchored', $css );
    }

}