Blog post page feature image

Hi everyone

I’m coding the blog post page(with multiple post, not single post), and I would like people can custom the background image from the heading, so I put some code inside. but that only show when people upload an image on the blog page(feature image), if they did not I would like to fall back my original design, but they show up blank, how can I fix it?
Thank you so much!

//if have the feature image
<?php if (is_home() && get_option('page_for_posts') ) { //check for the feature image
  $img = wp_get_attachment_image_src(get_post_thumbnail_id(get_option('page_for_posts')),'full');
	$blog_page_image = $img[0]; ?>
		<div class="div-block-21" style="background:URL('<?echo $blog_page_image;?>') no-repeat; background-size:cover; background-attachment: fixed;">
			<h1 class="heading-12">Blog Post </h1>
		</div>
<?php } else { ?> 
// If they don't have feature image
	<div class="div-block-21">
	  <h1 class="heading-12">Blog Post</h1>
	</div>
<?php };?>

My div-block-21 have background image in CSS

.div-block-21 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 350px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-image: url('../images/food-salad-restaurant-person.jpg');
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;
}

The page I need help with: [log in to see the link]