Background no topo do fórum

[iHeloaD]

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Imagem :

Imagem da minha dúvida:

Membros afetados : Todos os membros do fórum
Problema começou : Sempre
Endereço do fórum : http://www.cidadesocial.com

Descrição do problema

Olá,

Bem eu gostaria de um background que fique apenas do "Menu" para cima, ou seja, nesse cinza que tem acima do menu na imagem que coloquei no formulário, tipo que fique assim http://prntscr.com/5yyy8d.

[goodbye]

Olá!

Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores / Folha de estilo CSS

Experimente o código a seguir:

Código:

#pun-intro {
background-image: url(ENDEREÇO_IMAGEM);
background-repeat: no-repeat;
}

Coloque o endereço da imagem onde diz "ENDEREÇO_IMAGEM" e Valide!

Resuta?

Até mais!

[iHeloaD]

Olá,

Bem, eu ja tentei este código só que não resultou, ficou assim http://prntscr.com/5yzhm4, porém eu gostaria que cobrisse tudo como na imagem que eu coloquei de exemplo, e teria como centralizar a imagem, veja como ficou no link desta resposta.

Até mais.

[goodbye]

Troque o código por este:

Código:

#pun-intro {
background-image: url(http://www.rockstargames.com/V/pt_br/screenshots/screenshot/1047-1920.jpg);
background-repeat: no-repeat;
margin: -13px;
}

Modifique o valor de -13px para ir ajustando.

Até mais!

[iHeloaD]

Teria como posicionar a imagem no centro? Fica aparecendo somente a parte de cima dela, e eu também gostaria de aumentar o espaço http://prntscr.com/5z09kt.

[goodbye]

Certo, vamos chegar lá rsrs. Troque o código por este:

Código:

#pun-intro {
background-image: url(http://www.rockstargames.com/V/pt_br/screenshots/screenshot/1047-1920.jpg);
background-repeat: no-repeat;
margin: -16px;
padding: 50px;
background-position: 0;
}

Ajuste 50 para o espaço e o 0 para posição por exemplo "-100px".

[iHeloaD]

Quase la rsrs, teria como deixar o tamanho relativo tipo assim http://prntscr.com/5z0nng?

[goodbye]

É possível sim, porém vai ser necessário redimensionar a imagem através de códigos, experimente esse, troque o código anterior por este:

Código:

#pun-intro {
background-size: 100% 200%;
background-image: url(http://www.rockstargames.com/V/pt_br/screenshots/screenshot/1047-1920.jpg);
background-position: center;
background-repeat: no-repeat;
margin: -16px;
padding: 50px;
}

Resulta?

[iHeloaD]

Perfeito! Muito obrigado, até mais.