Or, embed this snippet using GenerateWP WordPress Plugin.

Download

Clone

Featured as Image & as background image

Code for a srcset featured image and a responsive background image

	/*
	 *  Get image and srcset from the post-id $post->ID
	 *  display it as an image tag with srcset
	*/
	$img_src	= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large', false );
	$img_srcset	= wp_get_attachment_image_srcset( get_post_thumbnail_id( $post->ID ), 'large', false );

    <img src="<?php echo esc_url( $img_src ); ?>"
	     srcset="<?php echo esc_attr( $img_srcset ); ?>"
	     alt="<?php echo $image['alt']; ?>"
    />


	/*
	 *	Get three sizes from the post-id $post->ID
	 *  set them as background images for a responsive span-element
	*/
	$medium		= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium', false );
	$large		= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large', false );
	$huge		= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'huge', false );

    <span class="project-featured-image js-animated"></span>

    <style type="text/css">
	    .project-featured-image {background-image: url(<?php echo $medium[0]; ?>);}
	    @media (min-width: 680px) {
		    .project-featured-image {background-image: url(<?php echo $large[0]; ?>);}
	    }
	    @media (min-width: 1120px) {
		    .project-featured-image {background-image: url(<?php echo $huge[0]; ?>);}
	    }
    </style>