Background Em Apenas Uma Página

#1 Filipe Gouveia

Novato no fórum

Usuários
1 posts

Sexo:Masculino
Localidade:São Paulo

Posted 02/03/2010, 13:01

Boa tarde,

Estou com uma pequena dúvida.

Tenho Quatro páginas (Home, Empresa, Produtos, Contato)

Todas num mesmo css (style.css)

Gostaria de colocar um background em todas as páginas menos na "Home".

Como posso fazer isso ?

Abraços

#2 DarkSign

Doutor

Usuários
868 posts

Sexo:Masculino
Localidade:Brasil
Interesses:Tecnologias na área WEB em geral e desenvolvimento.

Posted 02/03/2010, 13:11

uma ideia seria utilizar um segundo CSS só para as três páginas que receberão o fundo.

Não sabe por onde começar? Que tal pelas Regras ?

#3 Édipo Costa Rebouças

Veterano

Ex-Admins
1079 posts

Sexo:Masculino
Localidade:Brasil - São Paulo

Posted 02/03/2010, 20:28

o que vc pode fazer amigo e dar um id para o <body> dependendo do tipo de pagina que você esta, se você estiver na home vc deixar

<body id="template_home">

numa categoria

<body id="template_category">

numa pagina interna

<body id="template_single">

ai você no css vc usa os id's

body{
	background-image:url(back_generico.jpg);
}
body#template_home{
	background-image:url(back_home.jpg);
}
body#template_category{
	background-image:url(back_category.jpg);
}
body#template_single{
 	background-image:url(back_single.jpg);
 }

você pode usar essa idéia até para formatar as coisas de diferentes maneiras dependendo do tipo de pagina

body a{ color: #999; }
 body#template_home a{ color: #000; }
 body#template_category a{ color: #F00; }
 body#template_single a{ color: #FF0; }

Espero ter ajudado!

DarkSign likes this

#4 DarkSign

Doutor

Usuários
868 posts

Sexo:Masculino
Localidade:Brasil
Interesses:Tecnologias na área WEB em geral e desenvolvimento.

Posted 02/03/2010, 21:34

Putz, como me esqueci do tal do id?!?

Hehehe, boa Édipo! +1 pra tua reputação

Não sabe por onde começar? Que tal pelas Regras ?

#5 berga

Novato no fórum

Usuários
9 posts

Sexo:Masculino
Localidade:Brasília - DF

Posted 07/07/2010, 10:40

Aproveitando o topico para perguntar coisa parecida, tb sobre Back, gostaria de saber se tem como colocar a imagem do back pra redimensionar de acordo com a resolução do visitante.
Eu que uso 1440x900 no trabalho entro, ela se ajusta em tela inteira para mim e de casa 1280x800, ela tb se ajustaria.
Eu tenho um padrao: 1080p (creio que ngm use mais que isso)

#6 Édipo Costa Rebouças

Veterano

Ex-Admins
1079 posts

Sexo:Masculino
Localidade:Brasil - São Paulo

Posted 07/07/2010, 10:48

postei algo no imaster referente a isso:

http://forum.imaster...3c3927790c8074a

veja esse tópico no WMO tb http://forum.wmonlin...esolucao-do-pc/

Abraço

#7 berga

Novato no fórum

Usuários
9 posts

Sexo:Masculino
Localidade:Brasília - DF

Posted 07/07/2010, 12:47

Muuuuito obrigado!

Agora só falta fazer o iframe transparente funcionar no Firefox... no IE tá de boa, no Firefox alem de desalinhar todos os encaixes das figuras, ele nao está pegando a transparencia do iframe!

Pra quem quizer ver:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
 <style type="text/css">
  /* <![CDATA[ */
        html, body{ height: 100%; padding: 0; margin: 0; overflow: hidden;}
        .fundoFake{
          position: absolute; top: 0; left: 0; z-index: 0;
          display: block;
          border: 0; margin: 0;
          width: 100%; height: 100%;
        }
        
        .Body{
          position: absolute; top: 0; left: 0; z-index: 1;
          width: 100%; height: 100%;  overflow: auto;
        }
  /* ]]> */
  
        body 
         {
           background-color: #FFF;
           background-attachment: fixed;
         }
           .transp
         {
	filter: alpha ( opacity= 85 );
	
         }

  </style>
  </head>
  <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">>
  <img src="images/back.jpg" class="fundoFake" />
  <div class="Body">
        <!-- Save for Web Slices (distribuidora-logopreta.psd) -->
<table id="Table_01" align="center" width="920" height="739" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="images/distribuidora_01.png" alt="" width="920" height="226" border="0" usemap="#Map"></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/distribuidora_02.png" width="24" height="513" alt=""></td>
		<td>
<iframe src="home.html" name="iframe" scrolling="no" frameborder="0" width="870" height="465" class="transp">Home</iframe></td>
		<td rowspan="2">
			<img src="images/distribuidora_04.png" width="26" height="513" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/distribuidora_05.png" width="870" height="48" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->

<map name="Map"><area shape="rect" coords="767,73,868,109" target="iframe" href="encomendas.html"><area shape="rect" coords="613,74,714,110" target="iframe" href="produtos.html"><area shape="rect" coords="203,71,304,107" target="iframe" href="contato.html">
  <area shape="rect" coords="51,70,152,106" target="iframe" href="empresa.html">
  <area shape="rect" coords="365,31,555,147" target="iframe" href="home.html">
</map>
  </div>
 </body>
</html>

#8 Édipo Costa Rebouças

Veterano

Ex-Admins
1079 posts

Sexo:Masculino
Localidade:Brasil - São Paulo

Posted 07/07/2010, 13:08

http://forum.wmonlin...o-transparente/

berga likes this

0 user(s) are reading this topic

Entrar