[Resolvido] Alinhar imagem independente de tamanho de tela

[Rafaela Lee 2]

Bom dia pessoal.

Bom, eu estou com um site que o cabeçalho e o rodapé são compostos por imagem, da qual não dá pra adicionar como background (se desse seria a solução). E eu estou querendo dar um jeito pra que em qualquer monitor a imagem apareça da maneira certa, será que tem como? Em um monitor 'normal' a imagem fica certinha, dai eu abri o site no mac e ficou aquela coisa escrota, com a imagem se repetindo quando atingiu o tamanho da mesma.

E colocando 100% ele meio que distorce a imagem, bom distorce não, mas estica pra pode acompanhar o tamanho, e fica muito feio, será que tem alguma maneira pra arrumar isso?

 

Espero que tenha sido clara, obrigada.

[Giovani 104]

Rafaela passe um link pro pessoal visualizar :thumbsup:

[Rafaela Lee 2]

É um sistema já pronto, só altero mesmo layout, e faço as administrações do site [vendas e etc].

E em alguns lugares esta certinho, já em outros não.

CastelloShop

[Giovani 104]

Rafaela ... acho que só aumentando a própria imagem :ermm:

[Rafaela Lee 2]

É, estava quase na certeza disso.

Mas queria mesmo saber de mais alguém, vai que tinha solução, rs.

Mesmo assim obrigada.

[Thiago Moraes 32]

Algumas imagens devem repetir no background, outras não...em um layout tableless seria fácil de resolver

[Wanderson Valerio 102]

.img{
   width:500px;
   height:500px;
   top:50%;
   left:50%;
   margin-left:-250px;
   margin-rop:-250px;
}

 

Observe que a imagem tem 500px em width e 500px em height, se sua imagem for de 100px de width, teria que colocar margin-left:-50px; menos o valor da metade da imagem

[Rafaela Lee 2]

Sabe no que eu pensei? Me corrijam se eu estiver errada. Mas assim, Poderia deixar a imagem desse tamanho mesmo ou até menor um pouco colocar ela centralizada e quando faltar imagem nas laterais vai ter o background direitinho, como se fosse continuação da imagem, será que da certo?

Atualmente isso não da pro Rodapé, mas vou troca-lo, e então dará pra fazer, será que isso seria uma solução?

[Giovani 104]

Você pode fazer isso sim Rafaela, apesar de que não é a melhor solução, deve funcionar :thumbsup:

[Rafaela Lee 2]

É, eu também sei que não é a melhor, por isso pedi pra me corrigirem no caso de erro.

Eu tinha pensado nisso, mas daí... 'Alguém deve saber o que posso fazer', rs.

Ai vim aqui. :grin:

[Public2004 79]

Algumas imagens devem repetir no background, outras não...em um layout tableless seria fácil de resolver

 

Como citado pelo colega, esta é a melhor solução.

 

A imagem de fundo azul mais o bg do menu pode se repetir no "body" e no "header", a imagem fixa do efeito com o texto "Bem vindo..." e outra para "Busca".

 

No rodapé a mesma idéia, a parte cinza mais clara pode se repetir eu um container e a parte mais escura fixa.

 

Uma vez que seu layout é fluído, defina como serão alinhadas estas imagens fixas (left/right).

 

Att.

[Thiago Moraes 32]

Sabe no que eu pensei? Me corrijam se eu estiver errada. Mas assim, Poderia deixar a imagem desse tamanho mesmo ou até menor um pouco colocar ela centralizada e quando faltar imagem nas laterais vai ter o background direitinho, como se fosse continuação da imagem, será que da certo?

Atualmente isso não da pro Rodapé, mas vou troca-lo, e então dará pra fazer, será que isso seria uma solução?

 

 

você precisa recortar o padrão da imagem que se repete e definir como background, simples...se você tiver as imagens em camadas (PSD) fica mais facil ainda.

 

___

 

 

Se o post não te ajudou, é pq você claramente não entendeu...se não entendeu, pergunte...talvez eu perca meu tempo te explicando de uma maneira mais simples pra que você entenda, ou não.

[Rafaela Lee 2]

Capitei... Eu vou fazer isso e ver se da certo, tenho que arrumar isso logo, está muito escroto.

Obrigada. Qualquer dúvida que eu tiver posto aqui novamente.

[Rafaela Lee 2]

Pessoal, queria compartilhar com vocês. Mudei tipo assim 'Tudo'... hahaha

CastelloShop

[Vinicius Ianni 189]

Gostei das mudanças, só note o carrinho de compras, que no meu monitor fica como exibido na imagem:

[Rafaela Lee 2]

Nossa. Que estranho Oo Aqui está tudo normal.

Vou dar uma olhada, e verifica pra mim se continua com o mesmo problema?

Obrigada ;)