Ir para conteúdo

Arquivado

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

ErickDesign

Fixar a imagem no Background do Navegador em CSS

Por , em Desenvolvimento frontend

Recommended Posts

ErickDesign    1

ErickDesign
Postado

Coloquei no Background de minha página um fundo degradê mas quando puxo a barra de rolagem para baixo ele vem junto.A linha de comando que usei para colocar o fundo é essa:

<style type="text/css"><!--body { background:#FFFFFF url("../images/fundo.jpg") top left repeat-x fixed; }--></style>

Quem quiser conferir acesse o site ErickDesign.Procurei por tutorias sobre o assunto mas só encontrei para HTML que diz que só é necessário colocar:

<body background="imagem.jpg" bgproperties="fixed">

para fixar a imagem, mas como foi fito isso só se aplica em HTML.Sei que para muitos é algo tão simples que nem convém responder a este tópico, mas pesso a todos que me ajudem a esclarecer esta minha dúvida.Agradeço desde já.Atenciosamente,Erick.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas    6

Douglas
Postado

Numca utilize aspas para indicar o caminho da imagem em background.

 

Tente deixar tudo na mesma linha.

 

<style type="text/css"><!--body {background: #FFF url(../images/fundo.jpg) repeat-x fixed;}--></style>

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

nunca ouvi falar sobre essa parada do MAC... será q eh o mac q se perde ou eh o desenvolvedor q se perde e esqueçe d fechar, ou faz errado??? http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

mas verei sobre isso... inclusive, no validador css, quando você utiliza o font, você tem q colocar a primeira em aspas... aconteceu comigo recentemente...

Compartilhar este post

Link para o post
Compartilhar em outros sites

ErickDesign    1

ErickDesign
Postado

Poisé galera!Eu fiz da maneira como vcs me passaram mas infelizmente não resolveu o meu problema.Essa linha de comando que eu utilizei retirei justamente do site MAUJOR.O fundo em degradê continua se movendo juntamente com a barra de rolagem.Alguem pode me passar algum outro código, não precisa ser necesariamente CSS.Obrigado!Atenciosamente,Erick.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andreia Regina    1

Andreia Regina
Postado

Tenta assim:

 

body{	background-image: url(../images/fundo.jpg);	background-repeat: repeat-x;	background-attachment: fixed;	background-color: #FFF;	margin: 0;	padding: 0}

Compartilhar este post

Link para o post
Compartilhar em outros sites

ErickDesign    1

ErickDesign
Postado

Cara esse é o código:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><!-- InstanceBegin template="/Templates/erickdesign.dwt" codeOutsideHTMLIsLocked="false" --><head><!-- InstanceBeginEditable name="doctitle" --><title>Erick Design 2005 - Ideas for your Life</title><!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"><!--body {	background: #FFF url(../images/fundo.jpg) repeat-x fixed;}</style>}body,td,th {	font-family: Verdana, Arial, Helvetica, sans-serif;}a:link {	text-decoration: none;}a:visited {	text-decoration: none;}a:hover {	text-decoration: underline;}a:active {	text-decoration: none;}--></style><!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable --></head><body><table width="200" border="0" align="center" cellpadding="0" cellspacing="0">  <tr>	<td> </td>	<td><table width="200" border="0" cellpadding="0" cellspacing="0">	  <tr>		<td><img src="images/layout_01.jpg" width="800" height="243" border="0" usemap="#Map"></td>	  </tr>	  <tr>		<td width="300" height="564"><!-- InstanceBeginEditable name="EditRegion3" -->		  <table width="200" border="0" align="center" cellpadding="0" cellspacing="0">			<tr>			  <td> </td>			  <td> </td>			  <td> </td>			</tr>			<tr>			  <td> </td>			  <td> </td>			  <td> </td>			</tr>			<tr>			  <td> </td>			  <td> </td>			  <td> </td>			</tr>			<tr>			  <td> </td>			  <td> </td>			  <td> </td>			</tr>		  </table>		<!-- InstanceEndEditable --></td>	  </tr>	  <tr>		<td><img src="images/layout_03.jpg" width="800" height="93"></td>	  </tr>	</table></td>	<td> </td>  </tr></table><map name="Map">  <area shape="rect" coords="79,137,147,195" href="index.html">  <area shape="rect" coords="202,144,273,185" href="#">  <area shape="rect" coords="320,147,387,189" href="#">  <area shape="rect" coords="435,151,499,184" href="#">  <area shape="rect" coords="545,151,615,184" href="#">  <area shape="rect" coords="670,150,733,185" href="contato/index.php">  <area shape="rect" coords="13,34,341,109" href="index.html"></map></body><!-- InstanceEnd --></html>

Valeu pela atenção!

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

olha rapaz... fiz aki e funcionou normalmente... de repente essas paradas ae do dreamweaver q você tah colocando pode tah dando m*****, sei lah...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Erick Design 2005 - Ideas for your Life</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">body {background: #FFF url(imgs/fundo.gif) repeat-x fixed;}body,td,th {	font-family: Verdana, Arial, Helvetica, sans-serif;}a:link {	text-decoration: none;}a:visited {	text-decoration: none;}a:hover {	text-decoration: underline;}a:active {	text-decoration: none;}</style></head><body><table width="200" border="0" align="center" cellpadding="0" cellspacing="0">  <tr>	<td> </td>	<td><table width="200" border="0" cellpadding="0" cellspacing="0">	  <tr>		<td><img src="images/layout_01.jpg" width="800" height="243" border="0" usemap="#Map"></td>	  </tr>	  <tr>		<td width="300" height="564">		  <table width="200" border="0" align="center" cellpadding="0" cellspacing="0">			<tr>			  <td> </td>			  <td> </td>			  <td> </td>			</tr>			<tr>			  <td> </td>			  <td> </td>			  <td> </td>			</tr>			<tr>			  <td> </td>			  <td> </td>			  <td> </td>			</tr>			<tr>			  <td> </td>			  <td> </td>			  <td> </td>			</tr>		  </table>		</td>	  </tr>	  <tr>		<td><img src="images/layout_03.jpg" width="800" height="93"></td>	  </tr>	</table></td>	<td> </td>  </tr></table><map name="Map">  <area shape="rect" coords="79,137,147,195" href="index.html">  <area shape="rect" coords="202,144,273,185" href="#">  <area shape="rect" coords="320,147,387,189" href="#">  <area shape="rect" coords="435,151,499,184" href="#">  <area shape="rect" coords="545,151,615,184" href="#">  <area shape="rect" coords="670,150,733,185" href="contato/index.php">  <area shape="rect" coords="13,34,341,109" href="index.html"></map></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

ErickDesign    1

ErickDesign
Postado

Firmeza, mas calma ae que eu vou publicar a pagina com algumas coisas nela pra eu poder visualizar melhor a pagina!Daki algumas horas olhem la em erickdesign.locaweb.com.brValeus!

Compartilhar este post

Link para o post
Compartilhar em outros sites

ErickDesign    1

ErickDesign
Postado

Pw cara eu nem sei o que é tablelesss... rssssMas se tu ta querendo dizer que ele num teim nada é porque eu só usando pra estudo mesmo!É que moro no japão trabalho 12 horas todos os dias e ainda vou pra igraja e fico mais ums 3 horas e só depois venho pra casa! to meio sem tempo pra faze o site.Mas sempre que sobre um tempinho tamu ae na correria pra poder aprender alguma coisa com vocês!Em breve estarei estudando em uma escola de Design aki no japão e por isso a invocação pelo design.Quanto ao fundo degradê... sem sucesso...AtenciosamenteErick!

Compartilhar este post

Link para o post
Compartilhar em outros sites

ErickDesign    1

ErickDesign
Postado

Olha só cara! O máximo que eu consegui fazer foi isso com a dica que a Andréia me deu atravez de um email!

 

Olhem o código que ela me passou:

 

body {	background:#FFFFFF url(../images/fundo.jpg); 	top left repeat-x fixed;	}

A dica dela foi colocar um ponto e vírgula depois do parenteses.

 

O degradê ficou fixo porém se ir puxando para baixo aparece o início do degradê de novo!

 

uahuahuhauha

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

cara, tah funcionando perfeitamente... desde sua primeira publicação aki... naum sei q erro você tah vendo... :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

Butensal    0

Butensal
Postado

seguinte, tenta usar assim:

 

html {	background-attachment: fixed;	background-color: #fff;	background-image: url(../images/fundo.jpg);	background-repeat: repeat-x;	background-position: left top;   }

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