My home page includes a vertical slider that shows the game titles of 5 posts towards the top of my home page. Each publish that shows includes a background image that's proven behind it. It's presently working well, although I'd to show another background image behind each publish display. I have no idea regarding how to get this done using PHP code. I've published the code below that shows the file that consists of the JCarousel functionality. I am speculating I have to setup some form of condition that enables a brand new background image to show with every 'list' item?

Here's the code:

<div id="home-gallery-wrapper">
<ul id="home-gallery" class="jcarousel-skin-home clearfix">

<?php
global $post;

if ( get_option('minimax_hl_show') == '1' ) {
    $my_query = get_pages('include='.get_option('minimax_hl_ID').'');
} else {
    $my_query = get_posts('include='.get_option('minimax_hl_ID').'');
}
foreach($my_query as $post) :
    setup_postdata($post);
?>

<li style="width:910px"><div style="
background:url('<?php bloginfo('template_directory'); ?>/images/banner3.png') 
center top no-repeat;">
                                          <table align="center" style="width:910px;
height:200px">
<tr>
<td style="vertical-align:top">
<div style="width:90%; display:block; margin-left:auto; margin-right:auto">
<h2 style="text-align:center; border:none; text-decoration:none; font-family:calligraffiti;
 margin-top:15px; font-size:1.8em; line-height:35px; color:#fff; position:relative; z-index:10">
<a style="color:#fff; border:none; text-decoration:none" 
title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink(); ?>"
 rel="bookmark"><?php the_title(); ?></a></h2>
</div>
</td></tr>

</table></div>

    <?php
        $key="show-video"; 
        if ( get_post_meta($post->ID, $key, true) != '' ) {             
    ?>
    <div class="video"><?php echo get_post_meta($post->ID, $key, true); ?></div>
    <script type="text/javascript">
        jQuery(document).ready(function() {
           jQuery("embed").attr("wmode", "transparent");
        });
    </script>       
    <?php
        } else if ( has_post_thumbnail() ) {
    ?>
    <a title="Permanent Link to <?php the_title(); ?>" 
                href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
    <?php } ?>
    </li>

<?php
endforeach;
?>      
</ul>
</div><!-- end home-gallery-wrapper -->

<script type="text/javascript">


function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
    carousel.startAuto(0);
});

carousel.buttonPrev.bind('click', function() {
    carousel.startAuto(0);
});

// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
    carousel.stopAuto();
}, function() {
    carousel.startAuto();
});
};


jQuery(document).ready(function() {
    jQuery('#home-gallery').jcarousel({
        vertical: true,
        scroll: 1,
        easing: 'easeInOutBack',
             auto: 2,
             wrap: 'last',
             initCallback: mycarousel_initCallback,
            animation: 800
    });
});
</script>   

Create 5 different ad banners using the colours of your liking and give them a call banner1.png, banner2.png, banner3.png etc.

Then replace

foreach($my_query as $post) :
    setup_postdata($post);
?>

<li style="width:910px"><div style="
background:url('<?php bloginfo('template_directory'); ?>/images/banner3.png') 
center top no-repeat;">

With this particular

$i = 0;
foreach($my_query as $post) :
    setup_postdata($post);
?>

<li style="width:910px"><div style="
background:url('<?php bloginfo('template_directory'); ?>/images/banner<?php $i++; ?>.png') 
center top no-repeat;">