[Resolvido] Imagem sem fim

[reynansoares 0]

Olá amigos, desculpe se eu tiver postando em área errada, é que não aprendi a me localizar bem aqui ainda. Tenho uma dúvida em relação a Imagens (não sei bem se é html), mas queria saber como fazer imagens sem fins, usada muito em rodapé ou top.

exemplo : http://www.gicadoces.com/

 

A Imagem de detalhes meio marrom não tem fim, assim como a imagem de um verde mais escuro no rodapé, em qualquer resolução de visualização que usar, vai mostrar a imagem como não tendo inicio ou fim.

 

Bom esta em minha dúvida, obrigado.

[JCMais 75]

Olá reynansoares, primeiramente bem vindo ao fórum. :joia:

Esse efeito que você vê no site é produzido via a propriedade background do CSS.

 

Você define se a imagem deve-se repetir aplicando uma das propriedades no-repeat, repeat, repeat-x ou repeat-y.

Onde no-repeat não há repetição, repeat é tanto verticalmente quanto horizontalmente, repeat-x horizontalmente e repeat-y verticalmente, se você analisar o css da página que você passou (que utiliza tabelas para fazer o layout do site <_<) verá que o css aplicado é este:

   background-color: #002000;
   background-image: url("imagens/fundo.png");

 

Quando omitido o background-repeat, o valor padrão é repeat.

 

Cumprimentos.

[reynansoares 0]

Olá reynansoares, primeiramente bem vindo ao fórum. :joia:

Esse efeito que você vê no site é produzido via a propriedade background do CSS.

 

Você define se a imagem deve-se repetir aplicando uma das propriedades no-repeat, repeat, repeat-x ou repeat-y.

Onde no-repeat não há repetição, repeat é tanto verticalmente quanto horizontalmente, repeat-x horizontalmente e repeat-y verticalmente, se você analisar o css da página que você passou (que utiliza tabelas para fazer o layout do site <_<) verá que o css aplicado é este:

   background-color: #002000;
   background-image: url("imagens/fundo.png");

 

Quando omitido o background-repeat, o valor padrão é repeat.

 

Cumprimentos.

 

Obrigado pela ajuda, mas tem como em CSS mesmocolocar 2 backgronds? Por que no caso são duas imagens, eu não cheguei a ver o código CSS ou Html do site, se for algo ínutil me perdoe a pergunta. E também, é mais viavel fazer o site através de Div ou de Table ? Grato.

[Kaue Machado 0]

Olá reynansoares, primeiramente bem vindo ao fórum. :joia:

Esse efeito que você vê no site é produzido via a propriedade background do CSS.

 

Você define se a imagem deve-se repetir aplicando uma das propriedades no-repeat, repeat, repeat-x ou repeat-y.

Onde no-repeat não há repetição, repeat é tanto verticalmente quanto horizontalmente, repeat-x horizontalmente e repeat-y verticalmente, se você analisar o css da página que você passou (que utiliza tabelas para fazer o layout do site <_<) verá que o css aplicado é este:

   background-color: #002000;
   background-image: url("imagens/fundo.png");

 

Quando omitido o background-repeat, o valor padrão é repeat.

 

Cumprimentos.

 

Obrigado pela ajuda, mas tem como em CSS mesmocolocar 2 backgronds? Por que no caso são duas imagens, eu não cheguei a ver o código CSS ou Html do site, se for algo ínutil me perdoe a pergunta. E também, é mais viavel fazer o site através de Div ou de Table ? Grato.

 

Olá reynansoares, se o efeito do site em questão é tudo o que você quer, faça como o JCMais - FLF disse...

Basta criar uma imagem que vai definir o fundo da header (topo) e do body (corpo), tudo em uma imagem só, como aqui:

http://www.gicadoces.com/imagens/fundo.png

e é possível colocar dois fundos sim, é só dar uma olhada no código abaixo, considerando que esse fundo deve ter sido aplicado direto na tag body ou html, o seu código css deve ficar algo do tipo:

/* onde "#333" é a cor que fica debaixo da imagem de fundo */
html { height: 100%; background: #333 url(/imagens/fundo.png) repeat-x top left;}

/* aqui definimos o segundo background, altere largura, altura e margem como quiser, no exemplo está centralizado */
#segundobackground { position: relative; width: 500px; height: 250px; margin: auto auto auto auto;}

 

Você pode colocar o conteúdo direto na div do segundo background.

 

Espero ter ajudado.

[JCMais 75]

Na realidade é possivel setar vários backgrounds para o mesmo elemento, com CSS3, se você se preocupa com os usuários com -IE7, então você não irá querer usar isto, porém, veja: http://www.css3.info/preview/multiple-backgrounds/

[Kaue Machado 0]

Na realidade é possivel setar vários backgrounds para o mesmo elemento, com CSS3, se você se preocupa com os usuários com -IE7, então você não irá querer usar isto, porém, veja: http://www.css3.info/preview/multiple-backgrounds/

Esqueci de lembrar desse detalhe =]. Mas realmente, com excessão da border radius e box shadow que tem como emular no IE7/8, eu não uso nenhuma propriedade do css3 por causa do IE...

[reynansoares 0]

Obrigado galera, me ajudou muito. Esse fórum tem uma assistência ótima ^^

Tenho grande interesse em aprender CSS, porém vejo que é sempre muito complicado.

 

- EDIT -

 

Bom gente, aproveitando o tópico... eu tentei fazer o que falaram criei a imagem e a imagem que deveria ser o rodape. Fiz isso em Div, porém a imagem não aparece. Será que errei algo?

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {	background-image: url(images/fundo.jpg); background-repeat: repeat-x; margin-left: 0px;	margin-top: 0px; margin-right: 0px;	margin-bottom: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFF;}
a:link {	color: #36C; text-decoration: none;}
a:visited {	text-decoration: none; color: #36C;}
a:hover {	text-decoration: none; color: #F60;}
a:active {	text-decoration: none; color: #36C;}
.rodape { background-image: (images/top.jpg); height: 100; position:relative;} 
-->
</style></head>

<body>
<center>
<div class="rodape">
 <p>asdasd</p>
</div>

</center>
</body>
</html>

 

Top :

 

Fundo : http://img7.imageshack.us/img7/505/fundoxo.jpg

Botei link por que ela tem 6000px de height

[Kaue Machado 0]

reynansoares: que bom que você está progredindo! =] css não é um bicho de 7 cabeças, quando você acostumar, vai ver que são apenas duas cabeças, as vezes três rsrsrs. complicado mesmo, pelo menos pra mim, é javascript e php. O mais complicado do css é fazer um projeto cross browser (webstandard), é ai que o bixo pega, principalmente em projetos maiores. Dá uma olhada nessa página: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/, ela fala sobre CSS Reset Rules, vai fazer com que todos browsers tenham as mesmas regras, subscrevendo as regras css padrão que os browsers tem. Aqui também tem um post bem legal sobre Webstandards: http://www.elated.com/articles/cross-browser-website-tips/

 

Quanto à sua dúvida, Tente:

 

<div id="rodapé" style="background: #EEE url(/temporaria/imagens/body-bg.png) repeat-x bottom center; margin-top: auto; margin-bottom: 0; height: 200px; width: 100%; text-align: center;"><p>UHSAUHSUHUHA</p></div>

 

(eu escrevi o estilo direto na tag div por preguiça rsrsrs, mas é só passar os estilos para o seu stylesheet...)

[reynansoares 0]

reynansoares: que bom que você está progredindo! =] css não é um bicho de 7 cabeças, quando você acostumar, vai ver que são apenas duas cabeças, as vezes três rsrsrs. complicado mesmo, pelo menos pra mim, é javascript e php. O mais complicado do css é fazer um projeto cross browser (webstandard), é ai que o bixo pega, principalmente em projetos maiores. Dá uma olhada nessa página: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/, ela fala sobre CSS Reset Rules, vai fazer com que todos browsers tenham as mesmas regras, subscrevendo as regras css padrão que os browsers tem. Aqui também tem um post bem legal sobre Webstandards: http://www.elated.com/articles/cross-browser-website-tips/

 

Quanto à sua dúvida, Tente:

 

<div id="rodapé" style="background: #EEE url(/temporaria/imagens/body-bg.png) repeat-x bottom center; margin-top: auto; margin-bottom: 0; height: 200px; width: 100%; text-align: center;"><p>UHSAUHSUHUHA</p></div>

 

(eu escrevi o estilo direto na tag div por preguiça rsrsrs, mas é só passar os estilos para o seu stylesheet...)

 

KKKKKKKKKKKKKKKKKKKKKKKK, valeu mano, deu certinho agora ^^, daqui a pouco vou ler esses artigos e tals ^^. Obrigadão de novo.

[Kaue Machado 0]

Disponha! =]