Jump to content
amon293

Fundos diferentes

Recommended Posts

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

Share this post


Link to post
Share on other 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 

Edited by Rui Carlos

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.