Alinhar imagem de fundo no centro (horizontal e vertical)

[Sperle 0]

Gostaria de uma ajuda,

preciso alinha uma imagem de fundo a tela. O site já está alinhado ao centro, mas a imagem de fundo não consigo.

 

Acho que precisa ser no body, porque se eu criar uma nova div, vai gerar barra de rolagem.

 

Abaixo segue o código css que estou usando.

 

body {
	margin: 0;
	padding: 0;
	background-color: #d1caae;
	background-image: url(../imagens/fundo.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	}

#site {
	width: 840px;
	height: 620px;
	position: absolute;
	top: 50%;
	left: 50%;
	background: #000000;
	margin-top: -310px;
	margin-left: -420px;
	}

[Guilherme Rambo 4]

Você já declarou o background-position como center, deveria estar centralizada. Caso queira posicionar sua imagem de modo customizado pode usar números na propriedade background-position:

 

background-position:0px 0px;

Pode usar inclusive valores negativos ;)

 

[]'s

[PAJE SANTOS 0]

Pq você nao usa tudo junto:

background: #d1caae url(../imagens/fundo.jpg) no-repeat center center;

[Sperle 0]

O fundo ficou centralizado horizontalmente, não na vertical.

 

O problema de usar o "background-position: 0px 0px;" é que dependendo da resulução o site, que está na frente do background, vai ficar posicionado de forma diferente, e como o site interage com o fundo, isso não pode acontecer.

 

Uma solução que encontrei que me gatantia que o funco estaria sempre centralizado foi a seguinte:

 

body {
	margin: 0;
	padding: 0;
	background-color: #d1caae;
	background-image: url(../imagens/fundo.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	}
#fundo {
	width: 1920px;
	height: 1200px;
	background-image: url(../imagens/fundo.jpg);
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -600px;
	margin-left: -960px;
	}
#site {
	width: 840px;
	height: 620px;
	position: absolute;
	top: 50%;
	left: 50%;
	background: #000000;
	margin-top: -310px;
	margin-left: -420px;
	}

O único problema que gera scroll vertical e horizontal mesmo sem ter nenhuma informação no local.

 

Colocar as declarações juntar não muda nada, é só uma questão de organização.

 

Abs.

[Sperle 0]

Descobri o problema!

 

Com as seguintes configurações estava funcionando no IE mas não no Firefox (primeira vez que vi isso :))

 

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #d1caae;
	background-image: url(../imagens/fundo.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	}
#site {
	width: 840px;
	height: 620px;
	position: absolute;
	top: 50%;
	left: 50%;
	background: #000000;
	margin-top: -310px;
	margin-left: -420px;
	}

O problema está na DOCTYPE. Se eu eliminar ela do código HTML, funciona perfeito nos dois navegadores, ainda não encontrei uma que funcionasse.

Alguém dá uma luz?

 

Abs.

[Guilherme Rambo 4]

Site sem doctype é errado. Provavelmente a interpretação do IE é a errada. O HTML 4 Strict é o que sempre me ofereceu menos problemas.

 

[]'s