Ir para conteúdo

POWERED BY:

Arquivado

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

Muricium

[Resolvido] background de acordo com o tamanho do navegador

Por , em Javascript

Recommended Posts

Muricium    0

Muricium
Postado

Ola pessoal, estou criando um site e gostaria de colocar um foto ocupando todo o background do site, mas como cada computador tem um tamanho diferente, alguns 1024 x 768 outros 800 x 600. Tem algum jeito de fazer isso sem distorcer a foto? Será que precisa de identificar a resolucao do usuário e depois enviar a foto certa para background? ou como?

 

Abs

Compartilhar este post

Link para o post
Compartilhar em outros sites

iRCC    0

iRCC
Postado

hmmmm, eu posso te ajuda com uma função que pega o tamanho da tela do usuário, que seria:

function abrePop() {
	var width, heigh;

	width = screen.availWidth; 
	height = screen.availHeight;
}
espero que te ajude um pouco

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

Na verdade você precisa pegar o tamanho da area do browser, e nao da resoluçao de video:

 

funçoes:

document.body.clientWidth

e

document.body.clientHeight

 

faça um teste e veja:

 

alert(document.body.clientWidth+"x"+document.body.clientHeight);

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

Caro amigo, eis o script que você precisa. Eu li que você quer como background, mas faça os ajustes necessários.

 

Testado no IE7, FF3 e OPERA 9.

Dica: Coloque uma imagem grande para não perder a resolução quando aumentada, no meu teste coloquei uma de 1600x1200.

 

Boa sorte e q Deus te abençoe.

 

<html>
<head>
<style>
#img { 
position:absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript">

function tamanho(obj){

var largura = document.body.clientWidth; // LARGURA DA ÁREA ATUAL DO BROWSER
var altura = document.body.clientHeight;// AUTURA DA ÁREA ATUAL DO BROWSER

// O VALOR 15 É PARA AJUSTAR UM ESPAÇO EM BRANCO QUE FICOU NO INFERIO DO BROWSER OBS: MUDE A FORMA //DE CORRIGIR ISSO SE QUISER

obj.height=obj.height=altura+15; 
obj.width=obj.width=largura;

}
</script>
</head>
<body>
<img src="imagem.jpg" id="img" onload="tamanho(this)">
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Muricium    0

Muricium
Postado

poxa Daniel maravilha verifiquei aqui e funcionou, obrigadão agora vou dando uns ajustes, como nao sei trabalhar com javascript qualquer coisa vou perguntando

 

obrigado e Amem

Compartilhar este post

Link para o post
Compartilhar em outros sites

nask    0

nask
Postado

Mais um novato participando do forum, ja venho pedir desculpa por qualquer besteira que venha cometer.

 

Eae Daniel-DF seu codigo é fantastico, funciona filé! Mas como seria pra Blog. Pergunto por que tentei de tudo que foi jeito (meu jeito hehehe) e não consegui.

 

adicionei o java, css e o html. A unica forma que consegui colocar a imagem como background, foi como a tag body background. Mas assim ela não ajusta.

 

Com a tag img ela ocupa outro lugar no layout do blog, nunca ficando no background.

 

Escrevendo aqui, me lembrei de um codigo css, que força a foto ficar no fundo. Mas não consigo lembrar do nome ...

 

Puder ajudar, sera de muito agrado. Eu conseguindo resolver, coloco aqui a forma pra blog.

 

abraços.

 

Obs: tambem sou de brasilia!

Compartilhar este post

Link para o post
Compartilhar em outros sites

nask    0

nask
Postado

Sem sucesso daniel!

 

ja ta add ...

 

Não sei se ja mecheu com blog, mas é cheio de frecura. Tem tag no html que não precisa ser fechada, como img, la precisa.

 

Consegui de outra forma ... mas não o desejado.

 

Tava fazendo diretamente pela edição html do blog. Então adicionei o codigo por Gadget. Ele ficou no fundo (bakground), mas com 2 problemas.

 

1. Escondeu parcialmente minha div titulo (cabeçalho)

2. O background redimenciona todo Height da pagina. Crescendo junto com a barra de rolagem.

Obs: Não sei se isso é pra realmente pra aconteçer. Se for, não é o resultado final que desejo.

 

Então eu fiz um segundo ajuste:

 

Deixei somente o javascrpit no Gadget, adicionando css e html diretamente na edição html do blog.

 

O problema do background redimencionar o Heigth da pagina, acaba! Mas continua outros.

 

1. Some de vez minha div titulo (cabeçalho)

2. Não consigo fixar o background, nem em css nem em html.

3. Não ajusta o background.

 

Isso quer dizer que so na primeira forma de adicionar o codigo, irar funcionar.

 

Em relação ao atributo css, z-index: 1; , ele desconfigura o layout do blog. Fazendo o background ficar na frente de algumas divs.

 

Continuo tentando ... qualquer novidade posto aqui.

 

valeu pela força.

 

abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito