how to change the background color of the holder of an image using jquery cycle

I am using a jQuery.cycle.all.js for my images on my site. I want to change the background of the image as the images changes/cycles. So clearly I want to change the background of the div with the id flash. How to do that, any idea?

Here is the jsfiddle: http://jsfiddle.net/nixiechen/3ndpfnys/

Here is the javascript:

$('.holder').cycle({
    timeout:2000        
});

/*pause-play buttons*/
$('.pause').on('click',function() {         
    $(this).removeClass('on');
    $('.play').addClass('on');
    $('.holder').cycle('pause'); 
});
$('.play').on('click',function() {          
    $(this).removeClass('on');      
    $('.pause').addClass('on');     
    $('.holder').cycle('resume'); 
});

The HTML

<div id="flash">
    <div class="wrapper">
        <div class="btns">
            <a href="#" class="play" id="">&nbsp;</a>
            <a href="#" class="pause on" id="">&nbsp;</a>
        </div>
        <div class="holder">
            <img src="../images/01.jpg" alt="image"/>
            <img src="../images/02.jpg" alt="image"/>
            <img src="../images/03.jpg" alt="image"/>
            <img src="../images/04.jpg" alt="image"/>
        </div>
    </div>      
</div>

CSS

#flash { overflow: hidden; position: relative; height: 350px; background: #0a0f2c; }
#flash .wrapper { position: relative; height: 350px; z-index: 1; }
#flash .btns { position: absolute; overflow: hidden; top: 175px; left: 5px; z-index: 10000; }
#flash .btns a { float: left; width: 21px; height: 21px; margin: 0px 5px 0px 0px; text-decoration: none; }
#flash .btns a.play { display: block; background: url(../images/btn/btn_play_off.png) 0 0 no-repeat; }
#flash .btns a.play.on { background: url(../images/btn/btn_play_on.png) no-repeat; }
#flash .btns a.pause { background: url(../images/btn/btn_pause_off.png) 0 0 no-repeat; }
#flash .btns a.pause.on { background: url(../images/btn/btn_pause_on.png) no-repeat; }
#flash .holder { position: absolute; left: -150px; }
#flash .blue { background: #0a0f2c; }
#flash .brown { background: #3b1e16; }
#flash .black { background: #000; }

updated the jsfiddle link

You can add background-color to the #flash in cycle before function.

Jsfiddle

var color = 154235;
$('.holder').cycle({
    timeout: 2000,
    before: function (currSlideElement, nextSlideElement) {
        $('#flash').css({
            'background-color': '#' + color
        });
        color += 20;
    }
});