Hero Gutenberg Block using Advanced Custom Fields 5.8 Pro

functions.php

/**
 * Register hero block
 */
add_action('acf/init', 'hero');
function hero() {

    // check function exists
    if( function_exists('acf_register_block') ) {

        // register a hero block
        acf_register_block(array(
            'name'              => 'hero',
            'title'             => __('Hero'),
            'description'       => __('Image background with text & call to action.'),
            'render_callback'   => 'hero_render_callback',
            'category'          => 'formatting',
            'icon'              => 'format-image',
            'mode'              => 'preview',
            'keywords'          => array( 'hero', 'image' ),
        ));
    }
}

/**
 *  This is the callback that displays the hero block
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block content (emtpy string).
 * @param   bool $is_preview True during AJAX preview.
 */
function hero_render_callback( $block, $content = '', $is_preview = false ) {

    // create id attribute for specific styling
    $id = 'hero-' . $block['id'];

    // create align class ("alignwide") from block setting ("wide")
    $align_class = $block['align'] ? 'align' . $block['align'] : '';

    // ACF field variables
	$image = get_field('image');
	$headline = get_field('headline');
	$paragraph = get_field('paragraph');
	$cta = get_field('cta');

    ?>
	<section id="<?php echo $id; ?>" class="hero <?php echo $align_class; ?>" style="background-image: url(<?php echo $image; ?>);">
		<?php if ( $headline ): ?>
			<h2><?php echo $headline; ?></h2>
		<?php endif; ?>
		<?php if ( $paragraph ): ?>
			<p><?php echo $paragraph; ?></p>
		<?php endif; ?>
		<?php if ( $cta ): ?>
            <a class="button" href="<?php echo $cta['url']; ?>" target="<?php echo $cta['target']; ?>"><?php echo $cta['title']; ?></a>
        <?php endif; ?>
	</section>
    <?php
}

style.css

.hero {
  background-attachment: fixed; 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: top center; 
  padding: 100px 0; 
  color: #fff; 
  text-align: center;
}