Can't show custom post thumbnail sizes as background images

Question

I'm trying to work out a solution for responsive background images in Wordpress to use on my clients' sites.

This is what I got:

1) I created some custom thumbnail sizes:

function custom_image_sizes() {
    add_image_size ( 'small_regular', 832, 800, true );
    add_image_size ( 'small_retina', 1664, 1600, true );
    add_image_size ( 'big_regular', 1728, 800, true );
    add_image_size ( 'big_retina', 3456, 1600, true );
}
add_action( 'after_setup_theme', 'custom_image_sizes' );

2) Now I'm trying to use them in my template with inline media queries, like this:

$small_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 832, 800, ) );
$big_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 1728, 800, ) );
echo "<style type='text/css'>";
echo ".entry-featured-image { background-image: url('{$big_regular[0]}'); }";
echo "@media screen and (max-width:48em) { .entry-featured-image { background-image: url('{$small_regular[0]}.'); } }";
echo "</style>";

The point is: inline media queries are working, but they always show the same image size (832x800) no matter what.

How do I fix that?

Answer 1

Use this. you will need to call thumbnail sizes.

$small_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'small_regular' );
$big_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'big_regular' );
echo "<style type='text/css'>";
echo ".entry-featured-image { background-image: url('" . $big_regular[0] . "'); }";
echo "@media screen and (max-width:48em) { .entry-featured-image { background-image: url('" . $small_regular[0] . "'); } }";
echo "</style>";