Динамическая смена фона

[new_guy]

Есть плагин для WP(Meta slider), в нем меняются картинки, нужно что бы в зависимости картинки менялся background подложнки(сейчас он статичный).
Сам слайдер имеет на странице такую структуру<div id="metaslider_5" class="flexslider">
<ul class="slides">
<li class="slide-191 ms-image flex-active-slide" style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; z-index: 2;"><img width="800" height="576" class="slider-5 slide-191" alt="" src="http://chocopai/wp-content/uploads/2014/12/chocopai2.png" draggable="false"></li>
<li class="slide-192 ms-image" style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; z-index: 1;"><img width="800" height="576" class="slider-5 slide-192" alt="" src="http://chocopai/wp-content/uploads/2014/12/boy.png" draggable="false"></li>
<li class="slide-193 ms-image" style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; z-index: 1;"><img width="800" height="576" class="slider-5 slide-193" alt="" src="http://chocopai/wp-content/uploads/2014/12/marine.png" draggable="false"></li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a class="">2</a></li><li><a class="">3</a></li></ol><ul class="flex-direction-nav"><li><a href="#" class="flex-prev">&lt;</a></li><li><a href="#" class="flex-next">&gt;</a></li></ul></div>

Как это реализовать?

[new_guy]

Я слайдер вывожу в <div>, а для <div> background'ом задаю картинку. Я про нее говорю.

[new_guy]

С помощью плагина для WordPress. Через админку задаю картинки, потом в нужном месте вставляю вывод слайдера
<?php
echo do_shortcode("[metaslider id=5]");
?>

[Rise]

new_guy, в php:

/* bg0.png, bg1.png, bg2.png */
function metaslider_flex_params($options, $slider_id, $settings) {
if ($slider_id == 5) {
$options['before'][] = "$('#подложка').css('background','url(пу� �ь/bg'+slider.currentSlide+'.png)');";
}
return $options;
}
add_filter('metaslider_flex_slider_parameters', 'metaslider_flex_params', 10, 3);

[new_guy]

Объясни пожалуйста ещё раз для самых непонятливых:yes:
Получается сам слайдер формирует на странице такой код:
<!-- meta slider -->
<div style="max-width: 800px; margin: 0 auto;" class="metaslider metaslider-flex metaslider-5 ml-slider navigator">

<div id="metaslider_container_5">
<div id="metaslider_5">
<ul class="slides">
<li style="display: block; width: 100%;" class="slide-191 ms-image"><img src="http://chocopai/wp-content/uploads/2014/12/chocopai2.png" height="576" width="800" alt="" class="slider-5 slide-191" /></li>
<li style="display: none; width: 100%;" class="slide-192 ms-image"><img src="http://chocopai/wp-content/uploads/2014/12/boy.png" height="576" width="800" alt="" class="slider-5 slide-192" /></li>
<li style="display: none; width: 100%;" class="slide-193 ms-image"><img src="http://chocopai/wp-content/uploads/2014/12/marine.png" height="576" width="800" alt="" class="slider-5 slide-193" /></li>
</ul>
</div>

</div>
<script type="text/javascript">
var metaslider_5 = function($) {
$('#metaslider_5').addClass('flexslider'); // theme/plugin conflict avoidance
$('#metaslider_5').flexslider({
slideshowSpeed:3000,
animation:"fade",
controlNav:true,
directionNav:true,
pauseOnHover:true,
direction:"horizontal",
reverse:false,
animationSpeed:600,
prevText:"&lt;",
nextText:"&gt;",
slideshow:true
});
};
var timer_metaslider_5 = function() {
var slider = !window.jQuery ? window.setTimeout(timer_metaslider_5, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_5, 1) : metaslider_5(window.jQuery);
};
timer_metaslider_5();
</script>
</div>
<!--// meta slider-->
А куда вставлять твою функцию? Пробовал вставлять в php файл, в котором вывожу слайдер, поменял пути на свои, но не заработало.

[new_guy]

В общем сделал что бы фон сам по себе менялся со скоростью смены слайдов в слайдере)