Fundos diferentes

[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

[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