Ir para conteúdo

POWERED BY:

Arquivado

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

richardfogaca

[Resolvido] Imagem de fundo num site

Por , em Desenvolvimento frontend

Recommended Posts

richardfogaca    0

richardfogaca
Postado

Pessoal, gostaria de saber como eu faço para colocar uma imagem no fundo do site, onde ele ocupe todo o espaço do browser.

Um exemplo: www.intuicao.com.br

 

Vi que a faixa central foi feita com DIV e tal, mas pelo código não dá pra saber como que é feito, alguém sabe?

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

nesse caso ai, usaram uma unica imagem bem grande, e centralizaram ela com background-position

aplicada no <body>

 

simples assim.

Compartilhar este post

Link para o post
Compartilhar em outros sites

richardfogaca    0

richardfogaca
Postado

Desculpe a ignorância sobre o assunto, mas não consegui entender direito. Você coloca <body background="imagem"> e centraliza no css?

Se não for pedir muito, poderia codificar um exemplo?

 

Como posso fazer para que o site seja assim como esse exemplo citado, fique com a imagem totalmente "colada" nas paredes do browser, sem nenhuma separação?

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

<style type="text/css">
body {
   background: url('imagem_grande.jpg') no-repeat center top;
}
</style>

e pronto. Só isso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

richardfogaca    0

richardfogaca
Postado

Maravilha Willian, muito obrigado, estive pesquisando muito ultimamente pra tentar fazer algumas coisas que devem ser simples mesmo.

 

Fiz do modo que você exemplificou, mas parece que a imagem tem uma resolução maior que a dimensão da área do browser, o que faz com que ele corte pedaços da foto.

Como eu poderia fazer pra foto aparecer inteira sempre, independente da resolução?

E aquela barrinha cinza do meio, como eu posso fazer pra ela ficar "Colada" na parede do browser, assim como a imagem de background?

 

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Aí você vai precisar de mais imagens e javascript para ver a resolução do monitor do usuário...

 

Pense se é realmente isso que deseja...

 

Lembrando que mais imagens = mais peso...

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

É fora dos padrões mas...

a unica forma que eu conheço é assim:

 

html, body{ height: 100%; padding: 0; margin: 0; overflow: hidden; color:#FFF;}

.fundoFakeBody{
 	position: absolute; top: 0; left: 0; z-index: 0;
 	display: block;
 	border: 0; margin: 0;
 	width: 100%; height: 100%;
}
 	
.fakeBody{
 	position: absolute; top: 0; left: 0; z-index: 1;
 	width: 100%; height: 100%; overflow: auto;
}

 

<body>
 <img src="background.jpg" class="fundoFakeBody" />
 <div class="fakeBody">
</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Gabriel, uma gambiarra menos "gambiárrica" seria assim:

 

<body>
   <div id="tudo"><!-- conteúdo --></div>
   <img src="bg.jpg" id="bgGambiarra" alt="">
</body>

 

html, body {
    min-height: 100%;
}

#bgGambiarra {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: -7;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

richardfogaca    0

richardfogaca
Postado

Opa maravilha, obrigado pelas dicas pessoal! O background da imagem funcionou aqui certinho (sem espaços entre a parede do browser e layout líquido ok).

 

O dilema agora é como que eu poderia posicionar alguma imagem que se sobreponha à imagem background?

Tentei inserir uma div com fundo preto e width = 100% e ela está jogando a imagem de background para cima ou para baixo, consequentemente deformando a resolução da imagem :(

 

Alguma luz?

 

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Alguma coisa você fez de errado.

 

Copie e cole o conteúdo integralmente como disponibilizado abaixo:

 

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style type="text/css" media="all">
* {
	margin: 0;
	padding: 0;
}

html, body {
	min-height: 100%;
}

#bgGambiarra {
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: -7;
}

#barra_branca {
	background: #fff;
	height: 40px;
	width: 100%;
}
		</style>
	</head>
	
	<body>
		<img src="http://img693.imageshack.us/img693/3483/pxpreto.jpg" alt="" id="bgGambiarra">
		<div id="tudo">
			<div id="barra_branca"></div>
		</div>
	</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

richardfogaca    0

richardfogaca
Postado

Muito obrigado Evandro, era isso mesmo!

 

Infelizmente parece que quanto mais eu vou atrás, mais dúvidas eu tenho.. :(

 

Vocês costumam usar o Fireworks para fazer o desenho de layout? Como eu poderia fazer um layout com o FW, fatiar direito mas mantendo o conceito tableless?

 

 

Obrigado pela ajuda!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jucaduca    1

Jucaduca
Postado

rapz cada um tem sua opinião, eu nunca usei esse tipo de programa e não recomendo (opinião pessoal minha), o código fica bem mais "limpo e organizado" quando todo ele passou pelo seu teclado, mais cada caso é um caso, recomendo acompanhar o site do maujor "O grande imortal das CSS" http://maujor.com/ você vai aprender muito por la....

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

Bom dia,

 

Dúvidas sempre vão existir em nossas vidas, seja iniciante ou profissionail.

 

Não deixa que isso te desanime, seja persistente.

 

Quanto ao software para o desenvolvimento de layout's, seria desagradavel citar um ou outro, o certo e ver qual ferramenta lhe serve melhor ou qual você se adapta melhor.

 

E com respeito ao fatiamento no MEU CASO não utilizo, em minha opinião estas ferramentas mais atrapalham do que ajudam.

 

Espero que ajude.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

dá uma olhada aqui:

http://forum.imasters.com.br/index.php?/topic/404646-background-troca-automaticamente/

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