Ir para o conteúdo
amon293

Fundos diferentes

Mensagens Recomendadas

amon293

Boas

Estou aqui com um problema no meu site. Coloquei o seguinte CSS:

/* General */
body {
background-image: url('../img/background2.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-size:100% 100%;
color:#000; /* Font color */
text-align:justify;
}

O que acontece é que no portátil e em qualquer computador/browser, este código funciona, ou seja, o fundo preenche a totalidade do site e fica fixo quando faço o scroll pela página.

O problema ocorre quando vejo o site no meu smartphone ou no tablet (Samsung Galaxy S3 e Nexus7), o fundo estica-se em altura na totalidade da página ficando distorcido.

Já tentei fazer media queries e notas no CSS para ter outro comportamento com dispositivos móveis mas sem sucesso. Ou desformata o fundo, ou desformata o site, ou não preenche a totalidade do site, ou não fixa, enfim... não há forma de meter isto direito. Será que alguém me pode ajudar? Já ando aqui a bater com a cabeça contra as paredes!

Obrigado

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Monami

Cria uma holder

.bg{
z-index: -1;
overflow: hidden;
width: 100%;
height: 100%;
}

e depois a imagem

.bg img {
position: absolute;
top: 0; left: 0;
}

Ou se não te importas com o IE tenta adicionar a propriedade ao body.

background-size: cover

ou

background-size: contain 

Editado por Rui Carlos

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.