Think this should do it… (there are hundreds of ways to achieve this)
<?php // Display blog posts on any page @ https://m0n.co/l
$temp = $wp_query; $wp_query= null;
$wp_query = new WP_Query(); $wp_query->query('posts_per_page=5' . '&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.?>
<div class="post-item" style="background-image: url('<?php echo the_post_thumbnail( 'full' ); ?>')">
<div class="heading-inner">
<h2><a href="https://wordpress.stackexchange.com/questions/287417/<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h2>
</div>
</dvi>
}
?>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php if ($paged > 1) { ?>
<nav id="nav-posts">
<div class="prev"><?php next_posts_link('« Previous Posts'); ?></div>
<div class="next"><?php previous_posts_link('Newer Posts »'); ?></div>
</nav>
<?php } else { ?>
<nav id="nav-posts">
<div class="prev"><?php next_posts_link('« Previous Posts'); ?></div>
</nav>
<?php } ?>
<?php wp_reset_postdata(); ?>
<style>
.post-item {
position: relative;
background-repeat: no-repeat;
background-size:cover;
background-position: 50% 50%;
height: 200px;
width: 200px;
}
.heading-inner {
position: absolute;
bottom: 20px;
left: 20px;
}
</style>