Show background image through php plugin command - php

Question

I have i guess a bit dirty code. This is a function php with custom wp_nav code.
$output .= $indent . '<div class="categories-wrapper"><li' . z_taxonomy_image($cat->term_id) . $id . $class_names .'>';
So i have plugin that gives images to categories. What i need is that image will apply to the 'li' block and can be seen as a 'background:url(plugin url)' in css if it possible. this one does nothing.
Not sure which should i even use though.
z_taxonomy_image($cat->term_id)
Plugin documentation list - categories image
Rest of the code i think don't that matter. If not , i will add.
EDIT
Found a useful post that i think will solve my problem but i still don't know how to properly use it. How do i inster it in the <li>?
if (function_exists('z_taxonomy_image_url')) $background_url = 'background:url(' . z_taxonomy_image_url() . ')';
echo '<div class="' . $tax_term->slug . '" style="display:none; ' . $background_url . '">';
full help thread stackoverflow
EDIT 2
Figured out myself a proper code
$output .= $indent . '<div class="categories-wrapper"><li style="background: url(' . z_taxonomy_image_url($cat->term_id) . ')"' . $id . $class_names .'>';
it now shows in inspector url of my site instead of picture given by plugin.
EDIT 3
if i add foreach (get_categories() as $cat) it's working, i got the images
foreach (get_categories() as $cat)
$output .= $indent . '<div class="categories-wrapper"><li style="background:url(' . (function_exists('z_taxonomy_image') ? z_taxonomy_image_url($cat->term_id) : '') . ')"' . $id . $class_names .'>';
But it messed up the whole html code, added tons of <li> block and others so it overrides each other. Maybe i should put it somewhere else?
Small edit - code is not working on a index page (it's a block with categories-sidebar), but when you enter any post, it shows you correct picture of category, but also it shows it for EVERY block of categories on a sidebar same picture.
So maybe i ask something imposible and that plugin can't do that.

Answer 1

you need to insert the image in style=""
like this maybe:
'<li style="url('z_taxonomy_image($cat->term_id) ')"' . $id . $class_names .'>';
another solution
Why not use json response and append dom elements? insert each picture to the required element.
In the following example, I am receiving a json array of pictures and inset them to a specific element.
you could retrieve the picture and the picture type for instance and inset to elements by type.
this is my first attempt to help, be gentle.
for your example you could set the css of each li element using .css()
$.ajax({
type: "POST",
data: {text: text, images: images, images_big: images_big},
url: "/ajax/" + $(this).attr('data-post') + "/createPostComment",
dataType: 'json',
error: function () {
$el.remove();
return;
},
success: function (r) {
$el.attr('data-id',r.comment_id);
if(typeof r.pictures != 'undefined'){
for(var i=0; i < r.pictures.length; i++){
el.find('.comment-pictures-container').append('<img src="'+ r.pictures[i] +'" data-big="'+ r.pictures_big[i] +'" />');
}
}
bindCommentGallery($el);
bindCommentMenu($el);
}
});