Background de acordo com a resolução da tela[RESOLVIDO]

Turdin
Offline
JCB! Master

Mais

15 anos 6 meses atrás #28311 por Turdin

Turdin replied the topic: Re: Background de acordo com a resolução da tela

Tente isso aqui:

Coloque no header:

<script type="text/javascript">
	function trocarClasse() {
		var obj = document.getElementById("bgbody");
		
		if (screen.width == "800"){
			obj.className = 800;
		}
		else if (screen.width == "1024"){
			obj.className = 1024;
		}
		else if (screen.width == "1280" ){
			obj.className = 1280;
		}
		else if (screen.width == "1440"){
			obj.className = 1440;
		}		
		else if (screen.width == "1600"){
			obj.className = 1600;
		}
		else {
			obj.className = outra;
		}
	}
	
	</script>

Coloque no Body:

<body id="bgbody" class="resolucao" onload="trocarClasse ()">

Dai é só criar os css:
#bgbody.1600 {
background:url(page_bg1600.jpg);
}

#bgbody.1440 {
background:url(page_bg1440.jpg);
}

Acho que isso já resolve o problema =)

Abraços

[url=http://www.animespace.com.br:2atbtyfv]Animes Legendados e Dublados[/url:2atbtyfv]
[url=http://www.animespace.com.br:2atbtyfv]Joomla Studio, desenvolvendo seu caminho para o sucesso![/url:2atbtyfv]

Please Entrar ou Registrar to join the conversation.

lucascatani
Autor do Tópico
Offline
JCB! Professional

Mais

15 anos 6 meses atrás #28379 por lucascatani

lucascatani replied the topic: Re: Background de acordo com a resolução da tela

Turdin escreveu: Tente isso aqui:

Coloque no header:

<script type="text/javascript">
	function trocarClasse() {
		var obj = document.getElementById("bgbody");
		
		if (screen.width == "800"){
			obj.className = 800;
		}
		else if (screen.width == "1024"){
			obj.className = 1024;
		}
		else if (screen.width == "1280" ){
			obj.className = 1280;
		}
		else if (screen.width == "1440"){
			obj.className = 1440;
		}		
		else if (screen.width == "1600"){
			obj.className = 1600;
		}
		else {
			obj.className = outra;
		}
	}
	
	</script>

Coloque no Body:

<body id="bgbody" class="resolucao" onload="trocarClasse ()">

Dai é só criar os css:
#bgbody.1600 {
background:url(page_bg1600.jpg);
}

#bgbody.1440 {
background:url(page_bg1440.jpg);
}

Acho que isso já resolve o problema =)

Abraços

E aí cara.... fiz isso aí mas nada de dar certo...vou te passar o trecho CSS e o trecho do index.php

<script type="text/javascript">
function trocarClasse() 
{
      var obj = document.getElementById("page_bg");
      
      if (screen.width == "800"){
         obj.className = 800;
      }
      else if (screen.width == 1024){
         obj.className = 1024;
      }
      else if (screen.width == "1152" ){
         obj.className = 1152;
      }
	  else if (screen.width == "1280" ){
         obj.className = 1280;
      }
      else if (screen.width == "1440"){
         obj.className = 1440;
      }      
      else if (screen.width == "1600"){
         obj.className = 1600;
      }
      else {
         obj.className = outra;
      }
}   
</script>
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JPlugin::loadLanguage( 'tpl_SG1' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />

<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

<!--&#91;if lte IE 6&#93;>
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/ie6.css" type="text/css" />
<!&#91;endif&#93;-->

</head>
<body id="page_bg" class="resolucao" onload="trocarClasse ()">
	<div id="wrapper">
		<div id="header">

e o css

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/

#page_bg {
	background: #fafafa url(../images/page_bg.jpg) no-repeat;	
}
#page_bg.800 {
	background: #fafafa url(../images/page_bg800.jpg) no-repeat;	
}
#page_bg.1024 {
	background: #fafafa url(../images/page_bg1024.jpg) no-repeat;	
}
#page_bg.1152 {
	background: #fafafa url(../images/page_bg1152.jpg) no-repeat;
}
#page_bg.1280 {
	background: #fafafa url(../images/page_bg1280.jpg) no-repeat;
}
#page_bg.1440 {
	background: #fafafa url(../images/page_bg1440.jpg) no-repeat;
}
#page_bg.1600 {
	background: #fafafa url(../images/page_bg1600.jpg) no-repeat;
}
#page_bg.outra {
	background: #fafafa url(../images/page_bg.jpg) no-repeat;
}

O que pode estar errado?

Lucas Catani
[b:1bmpfj72]Blog[/b:1bmpfj72]: <a class="postlink" href=" www.l9web.com.br/blog/ " onclick="window.open(this.href);return false;"> www.l9web.com.br/blog/ </a>
[b:1bmpfj72]MSN:[/b:1bmpfj72] <a href="Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.">Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.</a>
[b:1bmpfj72]L9WEB | WEBSITES[/b:1bmpfj72] <a...

Please Entrar ou Registrar to join the conversation.

lucascatani
Autor do Tópico
Offline
JCB! Professional

Mais

15 anos 6 meses atrás #28382 por lucascatani

lucascatani replied the topic: Re: Background de acordo com a resolução da tela

Alias...só funciona no Internet Explorer... o que fazer?

Please Entrar ou Registrar to join the conversation.

Turdin
Offline
JCB! Master

Mais

15 anos 6 meses atrás #28391 por Turdin

Turdin replied the topic: Re: Background de acordo com a resolução da tela

Qual o site pra poder ver o script funcionando?
E qual o erro que da?
Tente colocar um ID sem _, não sei se isso pode gerar erro, eu sou meio iniciante em JS tbm...

Please Entrar ou Registrar to join the conversation.

abobre
Offline
JCB! Expert

Mais

15 anos 6 meses atrás #28394 por abobre

abobre replied the topic: Re: Background de acordo com a resolução da tela

Bom dia, faz assim:

<script language="JavaScript">
if (screen.width == "640" && screen.height == "480"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "800" && screen.height == "600"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "1152" && screen.height == "864"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "1024" && screen.height == "768"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "1280" && screen.height == "1024"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "1440" && screen.height == "900"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
	 }
</script>

Apenas mude os links da imagem.

Please Entrar ou Registrar to join the conversation.

Joomla Templates Best Joomla Templates Premium Joomla Templates Free Joomla Templates