Background

[' Akιo]

Qual é minha questão:
Olá!
Gostaria de saber o código para adicionar um background como esse em meu fórum:
http://tomodachiforum.forumeiros.com/forum


https://i.imgur.com/ZIjrpmU.png

Obrigado!

Tópico original: https://ajuda.forumeiros.com/t88307-background

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

Versão do fórum:
PHPBB3

[Shek]

Bom dia!

Você pode usar este código CSS:

Código:

body {
background: url(http://i40.tinypic.com/rtgi93.png) repeat-y transparent;
margin: -18px auto -8px;
width: 1024px;
}

Atenciosamente,
Shek

[' Akιo]

Não funcionou, e bugou o fórum.
Lembre-se que quero um pouco maior e com fundo branco, como essa imagem: https://i.imgur.com/vQrWuhh.png

[Konai]

Saudações!

O senhor poderia nos informar o endereço do fórum que viu tal background? Assim poderemos fazer a mesma função em seu fórum, mudando apenas algumas configurações nos códigos.

Um grande abraço,
Dokyo.

[' Akιo]

Está nas primeiras mensagens dos tópicos:

Olá!
Gostaria de saber o código para adicionar um background como esse em meu fórum:
http://tomodachiforum.forumeiros.com/forum

[Konai]

Saudações meu caro!

Aceda à:
Painel de Controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilo CSS

Lá o senhor deverá adicionar este código no início da tua CSS(de preferência):

Código:

body {
background-attachment: scroll, scroll;
background-color: #1c1212;
background-image: url(http://i.imgur.com/7ZZBQoO.jpg);
background-position: top right;
background-repeat: repeat;
font-family: gerogia;
font-style: italic;
line-height: 20px;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.bodylinewidth {
background: url(http://i40.tinypic.com/rtgi93.png) repeat-y transparent;
margin: -18px auto -8px;
width: 980px;
}

Feito isto, salve!  

Dokyo.

[' Akιo]

Não resultou.
Além disso, não quero os efeitos da fonte, apenas do Background!

[Konai]

Não resultou.
Além disso, não quero os efeitos da fonte, apenas do Background!

Perdoe-me, esqueci de retirar esses efeitos do código! Substitua o código atual por este:

Código:

body {
background-attachment: scroll, scroll;
background-color: #1c1212;
background-image: url(http://i.imgur.com/7ZZBQoO.jpg);
background-position: top right;
background-repeat: repeat;
line-height: 20px;
}
#wrap {
background: url(http://i40.tinypic.com/rtgi93.png) repeat-y transparent;
margin: -18px auto -8px;
width: 980px;
}

Até mais!

[' Akιo]

Está com a imagem de fundo preta... Como eu disse, gostaria que fosse essa: https://i.imgur.com/vQrWuhh.png

[Konai]

Basta trocar as urls, neste caso fiz isto por você! Substitua o código atual por este aqui:

Código:

body {
background-attachment: scroll, scroll;
background-color: #1c1212;
background-image: url(http://i.imgur.com/vQrWuhh.png);
background-position: top right;
background-repeat: repeat;
line-height: 20px;
}
#wrap {
background: url(http://i.imgur.com/vQrWuhh.png) repeat-y transparent;
margin: -18px auto -8px;
width: 980px;
}

Meus comprimentos.

[' Akιo]

O código que está sendo satisfatório é:

#wrap {
background: url(https://i.imgur.com/vQrWuhh.png) repeat-y transparent;
width: 1200px;
}

Porém, a imagem não fica 'encaixada'. a largura do fórum fica maior que a imagem. Como arrumar isso?

[Konai]

Saudações!

O senhor poderia me informar o endereço do fórum que você está fazendo tais testes? Preciso editar o código no próprio console da página do fórum que você está tentando, porque só assim teremos um resultado preciso e eficaz.

Até mais!

[' Akιo]

No meu fórum...

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

estou aperfeiçoando o código:

#wrap {
background: url(https://i.imgur.com/vQrWuhh.png) repeat-y transparent;
 background-position: center;
 border: none;
width: 1205px;
}

[Konai]

Bem, o seu código foi funcional. Parece estar encaixado perfeitamente com a largura do fórum! O que mais deseja?

No mais, tente este:

Código:

#wrap {
background: url(http://i.imgur.com/vQrWuhh.png) repeat-y transparent !important;
background-position: center !important;
border: none !important;
padding: 20px !important;
width: 1190px !important;
}

Até mais!

[' Akιo]

Bom, finalmente consegui o código que queria!

#wrap {
background: url(https://i.imgur.com/vQrWuhh.png) repeat-y transparent;
background-position: center !important;
border: none;
padding-left: 30px; padding-right: 30px;
width: 1180px;
}

Obrigado, e desculpe qualquer coisa