Or, embed this snippet using GenerateWP WordPress Plugin.

Download

Clone

5 post with images as background

<div class="blog-roll">
			<?php // WP_Query arguments
			$args = array (
				'posts_per_page'         => '5',
			);
			// The Query
			$query = new WP_Query( $args );

			// The Loop
			if ( $query->have_posts() ) {
				while ( $query->have_posts() ) {
					$query->the_post(); ?>
					<?php if(has_post_thumbnail()) { global $post; $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full', true, '' ); ?>
					<a href="<?php the_permalink(); ?>" class="blog-item" style="background-image: url( '<?php echo $src[0]; ?>' )">
					<?php } else { ?>
					<a href="<?php the_permalink(); ?>" class="blog-item">
					<?php } ?>
						<div class="blog-cat"><?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?></div>
						<div class="blog-cont">
							<h6><?php the_time('j F Y') ?></h6>
							<h5><?php the_title() ?></h5>
						</div>

					</a>

				<?php }
			} else {
				// no posts found
			}

			// Restore original Post Data
			wp_reset_postdata() ;?>
</div>