Como colocar está imagem de menu?

Qual é minha questão:
Como colocar essa imagem no menu,no lugar dos botões??



Medidas que eu tomei para corrigir o problema:
Nenhuma.

Imagens do meu problema:
https://2img.net/h/oi44.tinypic.com/29c546b.png

Endereço do meu fórum:
http://pokemoninfinitylegen.forumeiros.com/

Versão do meu fórum:
PHPBB3

Primeiro, vá em visualização - Página Inicial - Cabeçalho e Navegação.
Depois vá em Exibir apenas as imagens no menu: marque não.
Depois disso use este codigo (acho que e esse)

Código:

.forabg .topiclist li.row dl.icon dd.topics {
        background: url("http://i44.tinypic.com/29c546b.png") no-repeat scroll left top transparent;
        color: #0E2C3E;
        font-size: 12px;
        font-weight: 700;
        height: 30px;
        line-height: normal;
        margin-left: 13px;
        padding-top: 3px;
        text-align: center;
        width: 65px;

Se nao funcionar avise, porque eu uso este codigo no meu fórum tbm xD

Pior que não funcionou,eu colei isso la na CSS,ai apareceu que tinha um número diferente disso aqui "{" ,só tem uma Chave dessas nesse código,tem algo de errado nele,onde seria a outra "chave" } ??

Código:

.forabg .topiclist li.row dl.icon dd.topics {
        background: url("") no-repeat scroll left top transparent;
        color: #0E2C3E;
        font-size: 12px;
        font-weight: 700;
        height: 30px;
        line-height: normal;
        margin-left: 13px;
        padding-top: 3px;
        text-align: center;
        width: 65px;
    }

Tente agora

Bom,de um certo jeito funciono,mas não onde eu queria...
fico assim a imagem:

Olá,
Não entendi direito seu problema! Você quer que a imagem toda apareça e não so uma parte naquele mesmo local? Caso seja isso ao meu entendimento é so redimensiona-la

Código:

http://i.imgur.com/v417Y.png

Atenciosamente:
Mamedez

Ola, tente

Código:

#pun-head #pun-navlinks {
width: 1012px;
height: 50px;
background: url(http://i44.tinypic.com/29c546b.png) no-repeat top center;
left: -35px;
position: relative;

Resulta? Se não estiver do tamanho certo me diga que eu arrumo.

Peguei codigo errado, por isso não funcionou

Código:

#page-header .navbar ul.navlinks{
width: 1012px;
height: 50px;
left: -20px;
background: url(http://i44.tinypic.com/29c546b.png) no-repeat top center;
position: relative;}

funcionou vlw,mais uma coisinha,tem como isso aqui Início Calendário FAQ Buscar Membros Grupos Perfil Mensagens privadas Sair [ --/-- ] ficar em cima da imagem?

Tente,

Código:

#pun-head #pun-navlinks {
width: 1012px;
height: 50px;
background: url(http://i44.tinypic.com/29c546b.png) no-repeat top center;
left: -35px;
top: -10px;
position: relative;}

Resulta?

Não funciono :'( eu desisto,muito obrigado a todos em

Ola amigo, veja como funciona o codigo

#pun-head #pun-navlinks {
width: 1012px;
height: 50px;
background: url(https://2img.net/h/oi44.tinypic.com/29c546b.png) no-repeat top center;
left: -35px;
top: -10px;
position: relative;}

Verde - É a largura da barra do menu, você pode editar ela aumentando ou diminuindo os numeros.
Vermelho - É a largura da barra você pode editar ela aumentando ou diminuindo os numeros.
Azul - É a margem da esquerda da barra ou seja, quanto maior o numero que estiver nessa area mais a barra ira para a esquerda, se diminuir ela ira para a direita.
Laranja - É a margem do topo da barra ou seja, quanto maior o numero que estiver nessa area mais a barra ira para cima, se diminuir ela ira para baixo.

Olá Tente esse codigo >

Código:

#pun-head #pun-navlinks {
width: 1012px;
height: 50px;
background: url(http://i44.tinypic.com/29c546b.png) no-repeat top center;
left: -35px;
top: -10px;
position: relative;}


Ajudei Clica no +

connsegui,vlww