Trying to change background-image depending on what page im on

Trying to change background-image depending on what page im on

Hi everyone,

I hope someone can help, I have very little programming knowledge so the more information you can provide me the better please.

I have a header div on my site that appears on every page.

Currently there is a background-image to this div as a site wide image, however I want to make my site a little more dynamic than this. What I want to acheive is to have a script that runs in say a product listing page that uses the specific product catagory image for the div for that specific page.

So for example I would have a variable $catImage

my div style is currently:

#logoOuter {width: 1007px; height: 290px; background-image: url(/images/logo/feb.png);}

So for now lets ignore the $catImage, and I want to say what image i want lets say /images/logo/test.png) so I figured if I used the following on a catagory page it would work:

<script>
$('#logoOuter').css("backgroundImage", 'url("..
/images/logo/test.png")');
</script>

this doesn't seem to work at all? am I doing it completely wrong? am I missing anything, should I have reference to so other code somewhere?

the ultimate goal will be something like

<script>
$('#logoOuter').css("backgroundImage", '<?php echo $catImage;?>
');
</script>

Again this is all theoretical and not even sure if any of it is possible, please help 

Regards
Phil