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>