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

Есть плагин для 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>

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

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

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

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);

Объясни пожалуйста ещё раз для самых непонятливых: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 файл, в котором вывожу слайдер, поменял пути на свои, но не заработало.

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