如何为缩略图中的每个项目制作缩略图背景图像

Question

I have a carousel with four items for which each should display an image covering the background in full width. How can I set the post-thumbnail image to a background image as it does apparently not recall the css?

CSS

#services .item:nth-child(1) {
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll !important;
background-size: cover !important;
width: 100%; }

HTML/PHP

     <section id="services" class="services"><h1>What We Offer</h1>

        <div class="products" >
            <div class="carousel slide carousel-fade" id="carousel2" data-ride="carousel">
                <div class="carousel-inner">
            <?php
            $i=1;
            $the_query = new WP_Query(array(
            ‘category_name’ => ‘Cars’,
            ‘post_per_page’ => 4,
            'tag' => 'services'

            ));
            while ( $the_query->have_posts() ) :$the_query->the_post();if($i % 2 != 0){  ?>
            <div class="item services active ">
<?php if (the_post_thumbnail()) : ?>
    <div class="item services active">
    <?php the_post_thumbnail(); ?>
    </div>
<?php endif; ?>
                <div class="content-left">
                    <div class="text-center">
                    <h3><?php the_title();?></h3>
                    <h2 class="text-center"><?php the_content();?></h2>
                    </div>
                </div>
            </div>

            <?php }
            else { ?>
            <div class="item services">
<?php if (the_post_thumbnail()) : ?>
    <div class="item services">
    <?php the_post_thumbnail(); ?>
    </div>
<?php endif; ?>                    
                <div class="content-right">
                    <div class="text-center">
                    <h3><?php the_title();?></h3>
                    <h2 class="text-center"><?php the_content();?></h2>
                    </div>
                </div>
            </div>
            <?php } $i++; endwhile; wp_reset_postdata();?>
                    </div>
                </div>
            </div>
    

    <a class="left carousel-control" data-slide="prev" href="services #carousel2" role="button" >
      <span class="glyphicon glyphicon-menu-left"></span>
    </a>
    <a class="right carousel-control" data-slide="next" href="services #carousel2" role="button" >
      <span class="glyphicon glyphicon-menu-right"></span>
    </a>
            <ol class="carousel-indicators">
                <li data-target="services #carousel2" data-slide-to="0" class="active"></li>
                <li data-target="services #carousel2" data-slide-to="1"></li>
                <li data-target="services #carousel2" data-slide-to="2"></li>
            </ol>

        </section><!--#services -->

</div>