This is the code I use to do what you request on the category page.
Enter this code in the archive.php file if you want to do the same job for the tags as well.
Otherwise enter this code on the file category.php:
<section class="section s1">
<!-- Check if there is a posts to show -->
<?php if ( have_posts() ) : ?>
<!-- Set hero-->
<div style="padding: 0px; background-position: 0% 20%;
background-repeat: no-repeat;
-webkit-background-size: cover,contain!important;
height: 400px !important;
width: 100%!important;
max-width: 100%!important;
margin: 0 auto!important;
background-size: cover,contain!important; background-image: url(https://example.com/wp-content/uploads/Immagine-per-le-categorie.png)!important;" class="container archive_container">
<div class="overlay" style="background-color: #000000; opacity: 0.6; height: 400px !important;width: 100%;top: 80px;left: 0;position: absolute; "></div>
<div class="thumbnail-no-overlay" style="position: relative; padding: 80px 50px;">
<!-- Mostra numero articoli, nome categoria e descrizione categoria -->
<header class="header-categoria">
<!-- Mostra numero articoli -->
<h3 class="num-articoli" style="text-align: center; color:#FFF;">
<?php
$category = get_queried_object();
echo $category->count." ARTICOLI";
?>
</h3>
<!-- Mostra nome categoria -->
<h1 style="text-align: center; color:#FFF; margin-top: 15px; margin-bottom: 20px;" class="archive-title"><?php single_cat_title(); ?></h1>
<!-- Mostra descrizione della categoria -->
<?php if ( category_description() ) : ?>
<div style="text-align: center; color:#FFF; width: 50%; margin: 0 auto;" class="archive-meta"><?php echo category_description(); ?></div>
<?php endif; ?>
</header>
</div>
</div>
<div class="contenuto" style="max-width: 590px; margin: 0 auto;">
<!-- Inserisce barra di ricerca -->
<div class="cerca" style="margin: 40px 0;"><?php get_search_form() ?></div>
<div class="contenuto-articoli">
<!-- Loop degli articoli -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="cat_wrapper" style="margin-bottom: 25px; display: flex;">
<!-- Thumbnail -->
<div class="thumbnail" style="float: left; width: 61px; min-height: 61px; margin-right: 15px;">
<a href="https://wordpress.stackexchange.com/questions/346150/<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php echo the_post_thumbnail(array(60,60)); ?>
</a>
</div>
<!-- Titolo e Meta -->
<div class="titolo-meta" style="max-width: 515px; border-bottom: 1px solid #b4becc; padding-bottom: 5px;">
<!-- Titolo -->
<h2 style="font-size: 20px; line-height: 1.35; margin:0 0 10px 0;"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<!-- Meta -->
<div class="entry-content-meta">
<!-- Data -->
<time class="Data" style="margin-right: 25px; color: #a0a0a0; font-size: 12px; text-transform: uppercase;">
<?php the_time('j F, Y') ?>
</time>
<!-- Numero commenti -->
<span class="numero-commenti" style="margin-right: 25px; color: #a0a0a0; font-size: 12px; text-transform: uppercase;">
<?php comments_popup_link( '0 Commenti', '1 comment', '% comments', 'comments-link', 'Comments closed'); ?>
</span>
<!-- Autore articolo -->
<span class="autore" style="color: #a0a0a0; font-size: 12px; text-transform: uppercase;"> Scritto da <?php the_author_posts_link() ?>
</span>
</div>
</div>
</div>
<?php endwhile; ?>
<!-- Impaginazione numerata -->
<?php
the_posts_pagination (array (
'mid_size' => 2,
'prev_text' => __ ('Indietro', 'textdomain'),
'next_text' => __ ('Avanti', 'dominio del testo'),
));?>
</div>
</div>
<?php else: ?>
<div style="padding: 0px; background-position: 0% 20%;
background-repeat: no-repeat;
-webkit-background-size: cover,contain!important;
height: 400px !important;
width: 100%!important;
max-width: 100%!important;
margin: 0 auto!important;
background-size: cover,contain!important; background-image: url(https://example.com/wp-content/uploads/Immagine-per-le-categorie.png)!important;" class="container archive_container">
<div class="overlay" style="background-color: #000000; opacity: 0.6; height: 400px !important;width: 100%;top: 0;left: 0;position: absolute; "></div>
<div class="thumbnail-no-overlay" style="position: relative; padding: 80px 50px;">
<h2 style="color:#FFF; text-align:center; font-size: 40px; font-weight: 700; margin-bottom: 40px;">Nessun post trovato</h2>
<!-- Inserisce barra di ricerca -->
<div class="cerca" style="margin-bottom: 40px; margin-top: 20px;"><?php get_search_form() ?></div>
</div>
</div>
<?php endif; ?>
</section>
Obviously this is an example code that works for my personalization.
Please change it as you please.