Background Image

background-img.php

<style>
	.background-img {
	width: 100%;
	/*set the height to a fix value*/
	height: 260px;
	background-repeat: no-repeat;
	/*set the focal point*/
	background-position: top;
	background-size: cover;
	}
</style>
     <?php
$url;
$placeholder = lsx_get_option( 'post_placeholder' );
    if ( has_post_thumbnail( $post->ID ) ) {
        $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
        $url = $thumb['0'];  
     } else {
        $url = $placeholder;
        //this is for lsx theme , alternatively you can use any placeholder image link.
          }
      ?> 
    <div class="background-img" style="background-image:url('<?php echo $url; ?>');">
    <!-- dummy content -->
    </div>
    
 <?php
	$url;
	$expert_img = get_post_meta(get_the_ID() , 'post_meta_name' );
	$thumb = wp_get_attachment_image_src($expert_img[0]);
	$url = $thumb['0'];
	if ( has_post_thumbnail( $guides->ID ) && !$thumb) {
		$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($guides->ID), 'large');
		$url = $thumb['0']; 
	} else {
	$url = 'http://placehold.it/287x168/';
	}
?> 
    
    

This code is used instead of an image, this fixes some of the following problems: Image size consistency, image dimensions, overlapping html content onto of image.

get_the_ID() instead of $post->ID if you are in native loop