Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

MeTeOrA

Redimensionar automaticamente bg no css

Por , em Desenvolvimento frontend

Recommended Posts

MeTeOrA    0

MeTeOrA
Postado

Boa noite!

 

Pessoal, estou tentando fazer com que uma imagem fique automaticamente redimensionada, sem que ela repita.

Estou usando o Wordpress, no style.css estou mexendo no #wrapper, pois é o local que quero inserir a imagem.

 

Abaixo segue o código como está:

 

#wrapper {

margin: 0 auto;

width: 940px;

}

#wrapper {

background: url(images/background.jpg);

 

background-repeat: no-repeat;

margin-top: 20px;

padding: 0 20px;

}

 

Tentei de tudo quanto foi modo, alguma sugestão ?

 

Agradeço desde já.

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Redimensione em que sentido? Fazer um plano de fundo que se ajuste a resolução do usuário?

 

Se for, tem-se duas alternativas:

 

- Se o plano de fundo for bem abstrato, sem nenhum tipo de padrão de repetição, a imgem usada tem de ser ridiculamente grande,para que você possa fazer esse resize e manter compatibilidade até com aqueles lunáticos que usam o computador no LCD de 52" :o

 

Nem preciso dizer o quão pesado isso vai ficar né. :P

 

- Se houver algum padrão, a sua imagem deve ser grande apenas o suficiente para que você tenha UMA amostra completa desse padrão. E então usando background-repeat (que você anulou), você define a duplicação horizontal e verticalmente e o navegador faz o resto.

 

Se houver algum link online, ajuda. :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Então, nesse caso o melhor a se fazer acredito eu, seria fazer uma imagem no formato de quadrado, não muito pequeno, mas também não muito grande e usar backgroun-repeat para duplicar pela tela.

 

Esse fundo iria, por exemplo, no <body>. Daí na DUV do cabeçalho e do rodapé, você usaria outras duas imagens, com outros dois padrões repetíveis (essa palavra existe?) horizontalmente para fazer o efeito desgastado do papiro.

 

Por fim, outras duas imagens, com outros padrões, a serem usadas como fundo, repetindo-se verticalmente em outras duas DIV's.

 

A primeira delas, dentro do <body>, posicionada a esquerda e a segunda dentro dessa última, porém posicionada a direita.

 

Pode ser trabalhoso, principalmente montar os padrões de imagem, mas acredito ser bem possível.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito