Insert Featured Image in CSS Background Property using PHP to support Media Queries

I have this codes to specifically resize the the images in every posts. I placed it in my Wordpress functions.php

//TYPEONE images for large screens

add_theme_support('TypeOne');
set_post_thumbnail_size( 1200, 600, true );
add_image_size( 'TypeOne', 1200, 600, true );



//TYPETWO images for medium screen

add_theme_support('TypeTwo');
set_post_thumbnail_size( 800, 350, true );
add_image_size( 'TypeTwo', 800, 350, true );



//TYPETHREE images for small screen

add_theme_support('TypeThree');
set_post_thumbnail_size( 420, 350, true );
add_image_size( 'TypeThree', 420, 350, true );

Now my issue is I want those images to be used as background images. I have the codes below:

<?php global $post; ?>
<?php
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) false, '' );
?>
<div style="background: url(<?php echo $src[0]; ?> ) !important;">text </div>

Unfortunately, this approach totally ignores the codes (found in my function.php file) that I set for the images sizes.

Here's what I'm trying to achieve:

**HTML**
<div class="image-container">

</div>


@media screen and (max-width: 1100px) {
    .image-container{
        background: url(INSERT THE URL OF THE **TYPEONE** IMAGE)
    }
}

@media screen and (max-width: 700px) {
    .image-container{
        background: url(INSERT THE URL OF THE **TYPETWO** IMAGE)
    }
}

@media screen and (max-width: 400px) {
    .image-container{
        background: url(INSERT THE URL OF THE **TYPETHREE** IMAGE)
    }
}

would somebody share his/her knowledge here please? Thanks!