下階層に画像を表示

<?php get_template_part( 'box/header' ); ?>

<header>
    
<?php
$img = '';

if ( is_front_page() ) {
    $img = 'top.jpg';
    $title = 'WELCOME';

} elseif ( is_page('company') ) {
    $img = 'company.jpg';
    $title = 'COMPANY';

} elseif ( is_page('service') ) {
    $img = 'service.jpg';
    $title = 'SERVICE';

} elseif ( is_page('contact') ) {
    $img = 'contact.jpg';
    $title = 'CONTACT';

} else {
    $img = 'default.jpg';
    $title = get_the_title();
}
?>

<section class="hero" style="background-image:url('<?php echo get_template_directory_uri(); ?>/images/<?php echo $img; ?>');">
  <div class="hero-text">
    <h1><?php echo $title; ?></h1>
  </div>
</section>

</header>

.hero {
  position: relative;
  height: 50vh;        /* 高さはお好み */
  min-height: 300px;

  background-size: cover;
  background-position: center;

  display: flex;
  align-items: center;     /* ← 縦中央 */
  justify-content: center; /* ← 横中央 */
  text-align: center;
}

.hero-text {
  color: #fff;
  z-index: 1;
}