want to make a full width image for wordpress

i want to replicate something like enter image description here

right now I have enter image description here

the code I have right now

<header class="page-header">
                        <?php if (function_exists('z_taxonomy_image')) z_taxonomy_image(); ?>
                        <?php
                        the_archive_title( '<h1 class="page-title">', '</h1>' );
                        the_archive_description( '<div class="archive-description">', '</div>' );
                        ?>
                    </header><!-- .page-header -->

what should I do

page header css:

    .page-header {
  background: #fff;
  margin-top: 0;
  border-radius: 0.375rem;
  -webkit-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 2rem;
  margin-bottom: 3rem;
}

PS using a plugin which lets me upload a picture for categories and the line which shows the image is <php if (function_exists('z_taxonomy_image')) z_taxonomy_image(); ?>