Image of Category as background

Hello

I have a forum category like this image below, and i call it F1 :


I wanna change background of the entire topics in that forum category. Exp: when my users are redirecting to a post belong to F1 category, then body background will be change to https://i.imgur.com/k6hwhcd.jpg - not https://i.imgur.com/LBzrHIc.jpg .And of cuz, it should work on forum categorys, but another image

Code:

Default background - work all the page
body{background:url('http://i.imgur.com/LBzrHIc.jpg')}

Work only on F1 category
body{background:url('http://i.imgur.com/k6hwhcd.jpg') no-repeat !important)

Work only on F2 category
body{background:url('http://i.imgur.com/ELh2eeA.jpg') no-repeat !important)

And 1 more, they're never show on Index homepage, just work on special categorys that I've applied for. Is this possible?

My forum: http://rotavn.nstars.org/

Test account:

Tks for reading!

Hello sarkzkalie01,

The most I can think of is using regular expressions to check the window location for when you're in the category, and the navlinks for when you're in a topic. If any of those are true we'll change the background image.

Give this a try :
Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In all the pages

Code:

$(function() {
  changeBg(/\/f1-/, 'http://i.imgur.com/k6hwhcd.jpg');
  changeBg(/\/f2-/, 'http://i.imgur.com/ELh2eeA.jpg');

  function changeBg(fid, img) {
    var a = document.getElementsByTagName('A'),i;
    if (fid.test(window.location.pathname)) setBg();
    else for (i=0; i<a.length; i++) if (fid.test(a[i].href) && /nav/.test(a[i].className)) setBg();
    function setBg() { document.body.style.backgroundImage = 'url('+img+')' };
  };
});

If you need an explanation of the function arguments let me know.

Hey, I just edited f1 to f5 and it worked. That's really what I want

You're so amazing!

Thanks again, Katty!

Solved => Archived