[Resolvido] Imagem no Background ocupar a tela inteira

[fsphp 0]

Olá pessoal,

 

Como posso colocar uma imagem de background na minha tag body contanto que ela fique ocupando a tela inteira de fundo, ou seja, se a resolução do usuário for 800x600 ou 1024x768, em todos os casos ela fica "extendida"?

 

Alguém sabe aí?

 

Valeu http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Paulo de Tarso F. M. 24]

Amigo, se você fizesse uma busca no fórum encontraria outros tópicos que falam sobre isso... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

 

Pessoal, vamos utilizar a busca antes de postar!!!

 

Mas já aproveitando o espaço, não é possível fazer o que deseja, o CSS não tem controle sobre as dimensões de uma imagem de fundo...

[fsphp 0]

Obrigado Paulo.

 

Mas cá entre nós, fazer uma busca sobre isso fica complicado, tenho pesquisado vários assuntos no fórum e a maioria abre inúmeros tópicos sem na da a ver, ainda mais que não tem como o css alterar o tamanho da imagem, como você colocou, já imaginou a quantidade de posts que teria que ler até descobrir?

 

Basta uma simples resposta como a sua para ajudar, daí a importância do título do tópico ir direto ao assunto.

 

Obrigado pelo esclarecimento. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Paulo de Tarso F. M. 24]

Eu sei amigo que a busca nem sempre é satisfatória, também a utilizo e também passo pelas mesmas dificuldades que qualquer um passa. Mas minha função como Moderador é incentivar os usuários a pesquisarem, mesmo que seja complicado...

 

Uma dica: quando pesquisar, opte pela pesquisa apenas no título inicialmente, se não encontrar nada que atenda, vá expandindo os métodos de pesquisa. Utilize como última opção a abertura de um novo tópico.

 

Mas, de qualquer forma, espero que tenha ajudado...

 

 

Abraço!

[Édipo Costa Rebouças 0]

é possivel, sobre para contrariar o moderador rs,

 

o esquema é +- o seguinte, você vai colocar uma tag img com position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; e nela você joga a imagem, no body você deixar como overflow: hidden; width: 100%; height: 100%;

 

ai você cria uma div#container com position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: auto; e nela você joga seu site.

 

a ideia é +- essa.

[Paulo de Tarso F. M. 24]

Mas meu caro amigo, temos alguns itens a ressaltar nessa sua suposta solução:

 

1) Como sempre, nosso IE6 não renderiza a imagem como se pretende, ocupando a largura e altura máxima da área útil.

2) Renderização de imagens pelo HTML não são muito satisfatórias, visto que as distorções causadas muitas vezes são bem aparentes.

3) Caso utilize uma resolução widescreen, por exemplo, e você criou a imagem para uma resolução normalmente utilizadas em desktops, já sabe o que vai acontecer com a imegm, né? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

4) Procure redimensionar o browser para ver o que acontece com a imagem também...

5) Quando o conteúdo ultrapassa a altura máxima da área visível, a div #container ganha uma barra de rolagem, ou seja, você ficará com duas barras de rolagem...

6) A questão acima não vale para o IE6, cujo comportamento da imagem não ocupa nem a largura nem a altura máxima da área útil do browser.

7) Além disso, qo redimensionar a janela no IE6, a imagem é renderizada mantendo suas proporções, e não em relação às dimensões da janela.

8) E, por último, utilizar uma tag <img /> para fazer isso vai totalmente contra a semântica... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

 

Bom, provavelmente há mais detalhes a serem incluídos nessa lista, mas os testes simples que fiz cheguei a esses...

 

Pergunta: vale a pena criar tudo isso mesmo sabendo que não é semântico e que em cada browser isso funcionará de maneira diferente? :mellow:

[fsphp 0]

Valeu pessoal, obrigado pela ajuda de vocês, pelos esclarecimentos e dicas. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[webflex 0]

Olá,

 

Faça isso com uma linguagem de programação, em que você faz a leitura da tela e depois faz upload da imagem pretendida.

 

Cumprimentos,

webflex

[Édipo Costa Rebouças 0]

eu não usuaria, mas o autor do tópico estava querendo exatamente isto, porisso postei.

se é semantico ou não, bem, isso o author deve levar em consideração antes de aplicar a solução, e ele não esta pedindo algo semantico.

bem, sabendo aplicar, funciona em todos os browsers.

 

se você não conseguiu aplicar, bem, tenta de novo. talvez isso ajude:

 

body, html{ height: 100%; padding: 0; margin: 0; }

 

a intenção é mesmo que a imagem só ocupe a area visivel, e que a div container também, nessa div você joga o conteudo do site e deixa com overflow: auto; nisso funciona perfeitamente, seja ie6, seja oque for, você teria talvez que zerar bordas do img e deixa-lo com display: block, mas ai creio que você tenha feito isso.

 

lembrando que passei uma ideia de como fazer, agora você tem que, seu eu for colocar todos reset aqui fica meio trabalhoso, mas afim de mostrar que a solução funciona , olhe abaixo.

 

obs: não de opniões como se você alguma coisa mais que eu, seja humilde.

segue exemplo:

<?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;}
	.fundoFakeBody{
	  position: absolute; top: 0; left: 0; z-index: 0;
	  display: block;
	  border: 0; margin: 0;
	  width: 100%; height: 100%;
	}
	
	.fakeBody{
	  position: absolute; top: 0; left: 0; z-index: 1;
	  width: 100%; height: 100%;  overflow: auto;
	}
  /* ]]> */
  </style>
  </head>
  <body>
  <img src="fundo.jpg" class="fundoFakeBody" />
  <div class="fakeBody">
	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>
	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>
	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>
	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>
	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>
	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>
	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>
	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>
	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>
	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>
	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>
	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>
	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>
	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>
	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>
	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>
	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>
	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>
	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>
	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>
	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>
	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>
	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>
	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>
	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>
	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>
	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>
	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>
  </div>
 </body>
</html>

[Paulo de Tarso F. M. 24]

Opa!

 

Amigo Édipo Costa Rebouças, só não gostei desse comentário:

obs: não de opniões como se você alguma coisa mais que eu, seja humilde.

Embora acredito que falte uma palavra ali, mas eu acho que consegui entender o que queria dizer. Em momento algum eu tento "ser alguma coisa a mais do que alguém"... Tudo bem, isso não vem ao caso, não é o propósito deste tópico, mas uma coisa que precisa saber é que aqui é um fórum de Webstandards... Certo? Sendo assim, toda e qualquer solução que vá contra os princípios abordados pelos padrões não são apropriadas para serem passadas aqui.

 

Como um usuário pode pedir algo semântico, sendo que pode ser que ele nem saiba o que isso significa? :mellow: Por isso estamos aqui! Para passar nossos conhecimentos àqueles que ainda não conhecem... E não é por isso que eu ou qualquer outro Moderador aqui nos colocamos em uma posição que "achamos ser alguma coisa a mais do que os outros"...

 

Sinto muito que minha resposta possa ter sido interpretada de uma maneira um pouco distorcida, mas saiba que não é minha intenção não ser humilde... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

 

Ah! E eu sou um desenvolvedor extremista em relação aos padrões: eu defendo completamente... Não existe meio termo, ou é, ou não é... E qualquer solução que vá contra os padrões, eu não apoio... Como a sua solução não é semântica, não está de acordo com os princípios e, consequentemente, não tem meu apoio nesse sentido...

 

Caberia neste caso então o seguinte: pessoal, ao sugerir uma solução que de alguma forma não esteja de acordo com os padrões, informe isso no corpo do post... Por exemplo: "Mas isso não é semântico, fiz apenas para mostrar que dessa forma você consegue, mas vai contra os padrões"... Se você não souber que o que acabou de postar está de acordo com os padrões, saiba então que alguém irá informar... Mas, por favor, não interpretem mal o "puxão de orelha"...

 

Ok?

 

Espero que tenha esclarecido meu descontentamento... Nós moderadores também somos humanos, acreditem... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

 

Ah! E só para terminar: pessoal, toda vez que forem publicar sugestões de como resolver um problema, não se esqueçam de testar antes... E, obviamente, após testar, publiquem a solução da mesma forma como testaram... E nunca publiquem sugestões pela metade...

[Édipo Costa Rebouças 0]

Bem, sou moderador em outro fórum e sei disso, e por acaso do mesmo assunto. rs.

 

no fórum do imaster não tem uma sessão que fale sobre xhtml não semântico, o que seria tosco alias, mas poderia ser xhtml + css ... e ter um sub fórum para webstandards.

 

Acredito sim que devemos passar as melhores práticas póssiveis, mas no caso do nosso amigo, só desse jeito mesmo.

 

Alguns falariam, ah poderia fazer em js. Mas o código depois de executar o js não iria ficar semântico.

 

Se tive-se outro jeito de resolver e eu soube-se, acredite, eu postaria.

 

Sei que validação não é tudo, muita coisa válida no w3c, mas nem tudo é semântico.

 

Um exemplo:

 

http://forum.wmonline.com.br/index.php?showtopic=216443

 

o user acha que o w3c é deus, e se validou tá certo.

 

No caso, se te passam um layout para implemetar cara, e o designer quer uma coisa que não dá para fazer de uma forma semântica, é a vida cara, e pior, o cliente quer aquilo.

 

Só acho que não posso não dar uma solução, porque ela não é semântica... mas como o fórum não tem um sub forúm( ou sala de discussão ) pra isso, vou colocar no começo se é semântico.

 

Um abraço.

 

Acho melhor parar por aqui pois já estrapolamos o escopo desse tópico.

[fsphp 0]

Pessoal,

 

Agradeço os posts de vocês, foram muito esclarecedores.

 

É bom a gente saber o que está dentro dos padrões e também as alternativas para aquilo que não está pois, como falou o Édipo, muitas vezes o cliente quer algo e você acaba fazendo, claro, desde que não denigra o seu trabalho, nem seja gambiarras toscas.

 

A idéia de colocar a imagem de fundo foi minha, não de um cliente, então fica mais fácil optar por colocá-la ou não.

 

Acho que ficaria bem interessante ela ocupar toda a tela de fundo, não sei como poderia ser criada uma forma de enquadrar essa característica dentro dos padrões.

 

Muitas vezes não gostamos de ser contrariados e pegamos birra, mas isso não pode ter em foruns de desenvolvimento, pois no fundo todos estamos trocando conhecimentos e, todos são importantes para ampliarmos nossa visão.

 

Cada um pode falar a forma como acredita ser melhor, só não podemos concordar com ofensas pessoais, coisa que neste tópico não vi esse tipo de postura.

 

Obrigado a todos!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Édipo Costa Rebouças 0]

fsphp você poderia usar um fundo que se repete horizontalmente ou verticalmente, um exemplo meu site mesmo:

 

edipo.com.br, o fundo roxo é uma imagem de um pixel de largura que se repet horizontalmente..

 

 

tem esse:

 

beyoga.com.br/blog o fundo se repet verticalmente

 

bem, fica como sugestão

 

para implementar isso seria

 

body{

background:#000 url(suaimage.gif) (repeat-x ou repeat-y) ;

}

[Glauco Ribeiro 0]

eu não usuaria, mas o autor do tópico estava querendo exatamente isto, porisso postei.se é semantico ou não, bem, isso o author deve levar em consideração antes de aplicar a solução, e ele não esta pedindo algo semantico.bem, sabendo aplicar, funciona em todos os browsers.se você não conseguiu aplicar, bem, tenta de novo. talvez isso ajude:body, html{ height: 100%; padding: 0; margin: 0; }a intenção é mesmo que a imagem só ocupe a area visivel, e que a div container também, nessa div você joga o conteudo do site e deixa com overflow: auto; nisso funciona perfeitamente, seja ie6, seja oque for, você teria talvez que zerar bordas do img e deixa-lo com display: block, mas ai creio que você tenha feito isso.lembrando que passei uma ideia de como fazer, agora você tem que, seu eu for colocar todos reset aqui fica meio trabalhoso, mas afim de mostrar que a solução funciona , olhe abaixo.obs: não de opniões como se você alguma coisa mais que eu, seja humilde.segue exemplo:

<?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;}	.fundoFakeBody{	  position: absolute; top: 0; left: 0; z-index: 0;	  display: block;	  border: 0; margin: 0;	  width: 100%; height: 100%;	}		.fakeBody{	  position: absolute; top: 0; left: 0; z-index: 1;	  width: 100%; height: 100%;  overflow: auto;	}  /* ]]> */  </style>  </head>  <body>  <img src="fundo.jpg" class="fundoFakeBody" />  <div class="fakeBody">	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>	<p>Lorem ipsum dolor sit amet consectetuer et elit ac tempus Morbi. Sed et id volutpat ut dis diam ipsum Morbi accumsan quam. Lacinia nulla enim volutpat non mauris Phasellus Curabitur amet Nulla Pellentesque. Tempus gravida eget ultrices Aenean consequat ipsum ac condimentum nonummy orci. Quis vel libero Quisque libero fermentum eleifend et amet consequat porta. </p>	<p>Ligula est ante feugiat tincidunt Phasellus semper Nullam odio penatibus eleifend. Nulla porttitor vel tellus magna nibh hac nunc lobortis vitae Donec. Libero euismod pede ante Ut Sed cursus nonummy Proin auctor Pellentesque. Magna nibh risus dui vitae sem lacus Donec at Maecenas mauris. Egestas ut turpis id Suspendisse lacinia mollis leo at et accumsan. Morbi hendrerit wisi magna egestas pharetra Aliquam id Sed Mauris.</p>	<p>Condimentum magna fermentum neque congue elit feugiat ipsum malesuada Lorem Aenean. Et a consectetuer leo augue sed vitae euismod Aenean Vivamus ut. Vitae cursus Nam Aenean montes Sed nonummy nulla sed justo euismod. Accumsan ligula et sed porta natoque tincidunt Praesent justo Sed Sed. Morbi elit velit ipsum tempor accumsan molestie vitae dolor vitae velit. Lacinia nonummy ornare Proin tellus.</p>	<p>Pede Maecenas sapien Integer Integer Nam et pellentesque tempor ut metus. Auctor Curabitur venenatis Curabitur urna et pulvinar Curabitur pede Aenean hendrerit. Phasellus et Suspendisse hendrerit Morbi eu lobortis dis enim sit commodo. Dictumst quis est dui nibh sociis ipsum sagittis ac mollis Morbi. Ullamcorper elit tempus dictum eget sagittis tortor auctor id risus convallis. Vestibulum in urna adipiscing elit sem condimentum.</p>  </div> </body></html>

 

Rapaz me ajudou prak!!!!

Gosto muito de CSS mas nem tinha pensando nessa solucao.

 

Fico Grato.

[rodrigo.rrch 0]

Fica minha contribuicao tbm ^^

 

(Nao sei se posso postar coisas de outro site :blush: e so um video explicativo)

http://www.mxmasters.com.br/video-aulas/tableless/fazendo-o-background-se-ajustar-a-qualquer-resolucao-com-css/

 

outra solucao

 

body {
background: url(http://flickholdr.com/1600/1200/sunset);

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

 

esta técnica possui suporte limitado por parte dos navegadores. Principalmente Internet Explorer 8 e mais antigos não suportam background-size.

 

Mais uma solucao (nao testei essa)

 

Usa JS

// Função adaptImage()
// Parâmetros: targetimg (objeto jquery com elementos selecionados)
function adaptImage(targetimg) {
var wheight = $(window).height(); // altura da janela do navegador
var wwidth = $(window).width(); // largura da janela do navegador

// removemos os atributos de largura e altura da imagem
targetimg.removeAttr("width")
.removeAttr("height")
.css({ width: "", height: "" }); // removemos possíveis regras css também

var imgwidth = targetimg.width(); // largura da imagem
var imgheight = targetimg.height(); // altura da imagem

var destwidth = wwidth; // largura que a imagem deve ter
var destheight = wheight; // altura que a imagem deve ter

// aqui vamos determinar o tamanho final da imagem
if(imgheight < wheight) {
// se a altura da imagem for menor que a altura da tela, fazemos um cálculo
// para redefinir a largura da imagem para bater com a altura que queremos
destwidth = (imgwidth * wheight)/imgheight;

$('#fundo img').height(destheight);
$('#fundo img').width(destwidth);
}

// aqui utilizamos um cálculo simples para determinar o posicionamento da imagem
// para que a mesma fique no meio da tela
// posição = dimensão da imagem/2 - dimensão da tela/2
destheight = $('#fundo img').height();
var posy = (destheight/2 - wheight/2);
var posx = (destwidth/2 - wwidth/2);

//se o cálculo das posições der resultado positivo, trocamos para negativo
if(posy > 0) {
posy *= -1;
}
if(posx > 0) {
posx *= -1;
}

// colocamos através da função css() do jquery o posicionamento da imagem
$('#fundo').css({'top': posy + 'px', 'left': posx + 'px'});
}

//quando a janela for redimensionada, adaptamos a imagem
$(window).resize(function() {
adaptImage($('#fundo img'));
});

//quando a página carregar, fazemos o mesmo
$(window).load(function() {
$(window).resize();
});

 

As solucoes e do Guilherme Muller

 

Abraco