Пустой Div с отзывчивым фоновым изображением

Question

Я работаю над сайтом Wordpress и использую slick.js для карусели в разделе моего героя. Я использую пустой div и применяю к нему фоновое изображение, однако, я не могу заставить изображение реагировать при изменении размеров экрана.

вот мой код:

<!-- hero -->
<?php if(have_rows('hero')):?>
<?php while(have_rows('hero')): the_row(); ?>
    <div class="hero-carousel">
        <?php if(have_rows('slide')): ?>
            <div class="hero-slides">
                <?php while(have_rows('slide')): the_row();?>
                    <div class="hero">
                        <div style="background:url(<?php echo get_sub_field('hero_background');?>);">
                        </div>
                    </div>
                <?php endwhile;?>
            </div>
        <?php endif;?>
    </div>
<?php endwhile;?>
<?php endif;?>
<!-- /hero -->

// hero styles
.hero-carousel{
    .hero-slides{
        .hero{
            width: 100%;
            div {
                height: 700px;
                width: 100%;
                background-size: cover !important;
                background-position: center !important;
            }
        }
    }
}

// hero slick gallery
    $('.hero-slides').slick({
        infinite: true,
        slidesToShow: 1,
        autoplay: true,
        arrows: false,
        // dots: true,
    });