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>