Imagens nas laterais do Fórum

[Bruno Franks]

• Descrição:
  

Bom... queria saber se é possível fazer o seguinte efeito no meu fórum... Atualmente, ele está assim:


E eu gostaria que ele ficasse assim:


Como pode se ver... as colunas seriam formadas por três partes:
O topo com 163px de altura, fixo no topo da página...
(lado esquerdo https://i.servimg.com/u/f39/18/96/29/25/coluna10.png)
(lado direito https://i.servimg.com/u/f39/18/96/29/25/coluna11.png)


A base com 72px de altura, fixa no fim da página...
(lado esquerdo https://i.servimg.com/u/f39/18/96/29/25/base_d11.png)
 (lado direito https://i.servimg.com/u/f39/18/96/29/25/base_d12.png)

E o corpo com 204px de altura que seria posto exatamente de onde termina a imagem do topo (a 163px do topo da página) e se repetiria ao longo da página para que a coluna se redimensionasse de acordo com o tamanho do monitor do player e parasse de se repetir até exatamente o início da base (a 72px do fim da página)

 (lado esquerdo https://i.servimg.com/u/f39/18/96/29/25/corpo_10.png)
 (lado direito https://i.servimg.com/u/f39/18/96/29/25/corpo_11.png)

Seria possível esse efeito? Se sim... gostaria de um código para tal efeito...
Não sei se é um trabalho ardiloso esse... sou um pouco leigo no assunto, mas parece... Desde já muito agradecido!

---

• Informações:
  

Fórum:	ams-meiosangue-rpg.forumeiros.com	Versão:	PHPBB2
Tipo:	Pedido de código	Tags:	Imagens,laterais,Fórum

---

[Alex Habilidade]

Olá,

As duas primeiras imagens eu não consigo visualizar.

[Bruno Franks]

Ah sim... sinto muito... e agora? Está sendo possível a visualização?

[Alex Habilidade]

Cara,

Posso lhe dar um conselho?

Seria interessante se o senhor pegasse a imagem de fundo atual e montasse essas partes juntos formando somente uma imagem entende?

Digo isso porque você fazendo dessa forma que citei acima o fórum ficará leve, agora se ponharmos em pedaços irá sobrecarregar o site, ou seja, se alguém tiver uma internet lenta terá dificuldades em carregar todas as imagens...

[Bruno Franks]

Ah sim... entendo...
O problema é que a imagem de fundo ela se repete e se completa como um espelho a medida que vai sendo posta lado a lado ao longo da página... Se eu colocar as colunas no como fundo junto à imagem, todas as repetições terão uma coluna e ficará um tanto sem nexo nexo... por isso a ideia de montar as colunas separadamente

[Alex Habilidade]

Amigo, peça aqui um pedido de imagem:

https://ajuda.forumeiros.com/f17-criacoes-graficas

Tenho certeza que eles irão montar algo bom para você, após ter a nova imagem de fundo poste nesse tópico que tentarei adequar a imagem a página o que acha?

[Bruno Franks]

Hm... entendo... bom, vou tentar essa opção brevemente... mas gostaria de saber se é possível ser feito o que sugeri... sobre o code e etc... e se é possível com minha versão e tudo mais, se alguém quiser me ajudar montando o code pra mim, ficaria muito grato

[Daemon]

Aqui está:

Código:

body {
background-image: url(http://i39.servimg.com/u/f39/18/96/29/25/coluna10.png), url(http://i39.servimg.com/u/f39/18/96/29/25/base_d11.png), url(http://i39.servimg.com/u/f39/18/96/29/25/corpo_10.png), url(http://i39.servimg.com/u/f39/18/96/29/25/coluna11.png), url(http://i39.servimg.com/u/f39/18/96/29/25/base_d12.png), url(http://i39.servimg.com/u/f39/18/96/29/25/corpo_11.png), url(http://i61.tinypic.com/29osh8z.jpg);
background-position: 0% 0%, 0% 100%, 0% 50%, 100% 0%, 100% 100%, 100% 50%, 0% 0%;
background-repeat: no-repeat, no-repeat, repeat-y, no-repeat, no-repeat, repeat-y, repeat;
}

Basta que o senhor adicione ao css.


Até mais!

[Bruno Franks]

Ótimo! O code deu certo... Exatamente como eu queria, exceto por um pequeno detalhe que quando o analisei pensei em duas coisas... e gostaria de saber se seria possível... dois pedidos, dois codes:
O primeiro... seria possível deixar somente os topos (https://i.servimg.com/u/f39/18/96/29/25/coluna10.png; https://i.servimg.com/u/f39/18/96/29/25/coluna11.png), as bases (https://i.servimg.com/u/f39/18/96/29/25/base_d11.png; https://i.servimg.com/u/f39/18/96/29/25/base_d12.png) e o fundo (https://2img.net/h/oi61.tinypic.com/29osh8z.jpg) fixos e permitir que o corpo da coluna (https://i.servimg.com/u/f39/18/96/29/25/corpo_10.png; https://i.servimg.com/u/f39/18/96/29/25/corpo_11.png) siga a rolagem da página?

O segundo seria deixar fixo somente o fundo (https://2img.net/h/oi61.tinypic.com/29osh8z.jpg) e deixar toda coluna seguindo a rolagem da página.

[Daemon]

Seria assim que o senhor deseja?

Código:

body {
background-attachment: inherit;
background: url(http://i39.servimg.com/u/f39/18/96/29/25/coluna10.png), url(http://i39.servimg.com/u/f39/18/96/29/25/base_d11.png), url(http://i39.servimg.com/u/f39/18/96/29/25/corpo_10.png), url(http://i39.servimg.com/u/f39/18/96/29/25/coluna11.png), url(http://i39.servimg.com/u/f39/18/96/29/25/base_d12.png), url(http://i39.servimg.com/u/f39/18/96/29/25/corpo_11.png), url(http://i61.tinypic.com/29osh8z.jpg) fixed;
background-position: 0 0%, 0 100%, 0 50%, 100% 0%, 100% 100%, 100% 50%, 0 0;
background-repeat: no-repeat, no-repeat, repeat-y, no-repeat, no-repeat, repeat-y, repeat;
}

Até!

[Bruno Franks]

Não exatamente... acho que me expressei mal... desculpe-me
A ideia seria somente as colunas (todas as seis imagens que a compõe do lado esquerdo e direito) que fossem fixas nas laterais da página e somente o fundo (https://2img.net/h/oi61.tinypic.com/29osh8z.jpg) não fosse fixo...

[Daemon]

Troque:

Código:

body {
background: url(http://i39.servimg.com/u/f39/18/96/29/25/coluna10.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/base_d11.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/corpo_10.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/coluna11.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/base_d12.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/corpo_11.png) fixed, url(http://i61.tinypic.com/29osh8z.jpg);
background-position: 0 0%, 0 100%, 0 50%, 100% 0%, 100% 100%, 100% 50%, 0 0;
background-repeat: no-repeat, no-repeat, repeat-y, no-repeat, no-repeat, repeat-y, repeat;
}

Até mais!

[Bruno Franks]

Isso! Muito obrigado, mesmo! ^^

[Sennior]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.