· · 123

Como Fazer uma Imagem de Fundo Preencher a Tela Inteira

Observação: Um screencast com uma versão atualizada desta técnica está disponível neste link.

Recentemente em um projeto, houve a necessidade de fazer com que o plano de fundo do site (uma foto ou série de fotos, nesse caso) ocupasse toda a tela, não importando a resolução.

Download dos Arquivos de Exemplo

Sempre fui fã do site da agência August, um dos sites pioneiros a utilizarem fotos grandes como fundo. Porém, neste site foi utilizado Flash para o efeito de preenchimento de tela (originalmente; agora percebi que já trocaram para HTML/CSS). Hoje, com o avanço das bibliotecas JavaScript, procurei encontrar uma forma de fazer isso apenas com jQuery e um pouco de CSS (é claro que isso também pode ser feito com JavaScript "puro"). Neste tutorial mostrarei a solução que desenvolvi (veja o site do cliente).

HTML e CSS Básico

Antes de mais nada, temos que pensar como esta técnica funciona (mesmo que de forma mais simples) sem javascript. Não há uma forma confiável de fazer o efeito desejado apenas com HTML e CSS2, mas conseguimos uma funcionalidade básica. Não há muita flexibilidade com a utilização da propriedade CSS background, a não ser que seja utilizado CSS3 (cada vez mais uma alternativa viável, ver o Postscript), portanto iremos utilizar uma tag <img> e manipular seus atributos com CSS e Javascript.

Primeiramente, vamos analisar o HTML deste exemplo:


<!doctype html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8" />
	<title>Imagem de Fundo Preenchendo Toda a Tela</title>
	<style>
		/* Estilos (em um site real colocar em arquivo externo) */
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script>
		//Javascript (em um site real colocar em arquivo externo)
	</script>
</head>
<body>

<div id="fundo-externo">
	<div id="fundo">
		<img src="http://flickholdr.com/1600/1200/sunset" alt="" />
	</div>
</div>
<div id="site">
	<h1>Site Exemplo</h1>
	<p>
		Lorem ipsum...
	</p>
</div>

</body>
</html>

Estou colocando os estilos e o javascript dentro do documento, mas é recomendável em um projeto real utilizar arquivos externos. Quanto ao HTML, nada muito diferente do normal, apenas a questão de haver duas divs, uma chamada #fundo-externo, para criar um contexto de posicionamento e outra chamada #fundo que será o nosso container para as imagens que irão preencher a tela. A razão de utilizar uma div é que podemos colocar várias imagens dentro dela e até criar um slideshow (como foi o caso no projeto do meu cliente).

A ideia de ter uma div com a imagem antes do site é poder posicionar o fundo e o site de forma absoluta, para que possamos sobrepor os dois. Vejamos o CSS:

Com isso, você verá que a imagem de fundo ocupará toda a largura da tela. Uma das desvantagens desta técnica já fica aparente logo de cara: por causa do posicionamento absoluto do site, temos algumas limitações quanto ao posicionamento da div#site. Neste caso, utilizei margens negativas para centralizar o container no layout. Porém, se a tela for muito estreita, haverá corte do conteúdo do site. Também podemos trabalhar com o site alinhado à esquerda ou à direita.

Você também perceberá que, apesar da imagem de fundo ocupar toda a tela, dependendo da forma como a janela do navegador é redimensionada, fica um espaço branco na parte de baixo do site. Isso acontece porque o redimensionamento automático está apenas acontecendo de acordo com a largura da janela. Quanto menor a largura da janela, menor a largura da imagem. Dependendo das proporções da janela ou tela, a imagem ficará menor do o espaço a ser ocupado, o que não é o que queremos aqui. Queremos que a imagem ocupe toda a tela, não importando o seu tamanho ou proporção.

Para isso, iremos utilizar um pouco de javascript:

No código acima utilizei um pouco de jQuery (apenas para os seletores e eventos), mas não é algo necessário. Isso pode ser feito com javascript puro sem problemas. Também não sou especialista em javascript, então acredito que podem haver melhorias na função (sugestões serão bem-vindas!), mas esta foi a solução que funcionou para mim.

Com esta técnica deixamos o CSS cuidar do redimensionamento da largura da imagem. Caso a largura fique muito pequena e a altura da imagem acabe ficando menor do que a altura da janela do navegador, a script atua para redimensionar a imagem de acordo com sua altura. Assim a imagem sempre ocupa toda a tela do navegador, não importando o tamanho ou proporção da mesma.

Veja o exemplo final aqui

Esta técnica foi útil para você? Opine nos comentários!

Postscript: Uma Técnica com CSS3

Para conseguir um efeito semelhante com CSS3, sem utilizar javascript e utilizando menos HTML, podemos nos utilizar da nova propriedade background-size. O código CSS é bem simples:

Veja o exemplo CSS3 aqui

Redimensione a janela do seu navegador para ver o efeito em ação. Neste caso, podemos apagar as divs #fundo-externo e #fundo, pois não são mais necessárias.

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

Para mais informações sobre background-size e outras novas propriedades CSS3, visite este artigo do Sitepoint.

Topo

123 Comentários

  1. Gravatar
    Thiago Hilpert

    Caramba Parabéns, achei seu site pesquisando na web e tive que comentar, PQP que artigo animal velho vc está de parabéns vou acompanhar seu site, já adicionei nos favoritos rsrs!!! Posso manter contato e dar dicas para posts?

    Valeu e parabéns novamente

    1. Gravatar Guilherme Müller

      Valeu Thiago! Infelizmente tenho pouco tempo para atualizar o blog atualmente, mas estarei atualizando-o pouco a pouco. Obrigado pelo apoio e se tiver alguma dica envie um e-mail.

  2. Gravatar
    Carlos Jr

    muito útil, obrigado.

  3. Gravatar
    Juscelino Cavalcante

    Cara vc tá de parabens, tou começando agora na area de web e tava precisando justamente fazer esse esquema no site do criente, valeu pelo post, muito bom mesmo...

  4. Gravatar
    Bruno Prado

    cara, fantástico
    manja muito
    parabéns

    1. Gravatar Guilherme Müller

      Obrigado! Estou preparando mais alguns posts com técnicas úteis.

  5. Gravatar
    Luciano Pessoa

    Cara parabens me deu um help aqui do tamanho de um trem valeu mesmo.

  6. Gravatar
    Hugo Santiago

    Olá amigo tem como fazer isso com um backgroud-color, por exemplo no css defino pra ele ter 100% da tela, mais quando fecho o navegador ao ponto de surgi uma barra de rolagem horizontal, o mesmo rodapé não preenche de cor o 100%.

    1. Gravatar Guilherme Müller

      Olá Hugo,
      Teria que ver o caso com calma, mas se você utilizar a background-color no tag body, você não terá esse problema.

  7. Gravatar
    Gunner

    olá eu utilizei exatamente como esta ai, porem quando altero o tamanho de width: alinha tudo para a direita. estou usando width:900px;
    Se puder me ajudar eu agradeço e agradeceria mais ainda se pudesse me enviar um E-mail.
    Obrigado.

    1. Gravatar Guilherme Müller

      Olá Gunner,
      Esta técnica foi desenvolvida para ser utilizada na área da tela inteira. Caso você queira trabalhar com uma largura fixa, talvez nem precise de tudo isso. Depende de cada caso, pode até ser mais fácil de fazer.

      Qualquer coisa me mande um e-mail que eu posso dar uma olhada. Apenas peço desculpas se eu demorar para responder pois estou com bastante projetos no momento.

  8. Gravatar
    pepe

    cara nao entendi to fazendu um blog dai eu peguei uma imagem mais eu boto ela e sempre fica pequena
    ajuda

    1. Gravatar Guilherme Müller

      Olá pepe,
      Você precisaria especificar melhor o que está tentando fazer, não entendi.

  9. Gravatar
    Ed de Souza

    Cara, que dica excelente!! E parabéns pelo seu trabalho, muito bom gosto!
    Com certeza estarei visitando mais vezes aqui, obrigado!

    1. Gravatar Guilherme Müller

      Obrigado! Que bom que foi útil. O blog está meio parado agora mas até o final do ano sai o redesign do site, fique ligado!

  10. Gravatar
    felipe

    Cara, Parabéns pelo script foi muito util, continue assim vlw!!!

    1. Gravatar Guilherme Müller

      Valeu Felipe! Em 2012 terei novos artigos!

  11. Gravatar
    Isaias M silva

    Olá Guilherme,

    Ficou muito legal! Parabéns!

    Você encontrou algum problema com o IE 8 no comando abaixo?

    $(window).resize(function() {
    adaptImage($('#fundo img'));
    });

    Abraços,
    Isaias

    1. Gravatar Guilherme Müller

      Obrigado pelo comentário!

      Então, não lembro de ter problemas com o IE8, mas vou verificar. O que exatamente aconteceu?

  12. Gravatar
    Ed de Souza

    Olá, Guilherme
    Qual foi recurso q vc usou para fazer o slideshow do bg?
    Teria mostrar a aplicação dele no código?
    Estou com um projeto q precisa ter algo parecido.

    Muito grato,
    Ed

    1. Gravatar Guilherme Müller

      Olá Ed,

      Para fazer um slideshow, basta adaptar um pouco a técnica. No site da Berlim Ambientes (veja no meu portfolio) utilizei várias imagens dentro da mesma div e o plugin cycle para jquery. Pode ver o código do site do cliente para ter uma ideia.

  13. Gravatar
    Lee Oliveira Samson

    Muuuuuuuuuuuuuuuuito Obrigado amigo .!
    estava com essa duvida, pra fazer um serviço pra um cliente.

    Mt obg msm salvou minha vida

    SUCESSO !

  14. Gravatar
    Amanda

    Olá Guilherme,

    Adorei o artigo, mas estou tendo problemas no IE 9. No final do site ele está aparecendo uma barra branca, como se o fundo da imagem terminasse ali e ele complementasse sem a imagem, fica sem fundo.

    A imagem não está sendo aplicada no browser todo, vc sabe o porque disso, estou tentando catar aqui no código, mas não consigo achar nada.

    Fico no aguardo.

    Obrigada.

    1. Gravatar Guilherme Müller

      Olá Amanda,

      Que bom que gostou do artigo.
      Problemas como esse precisam de bastante análise, pois inconsistências de HTML ou CSS são parte do nosso trabalho. Eu teria que ver um exemplo para tentar diagnosticar o que está acontecendo. Tente fazer modificações no código (salve uma cópia antes) pois esta é a única maneira para se chegar a uma solução.

  15. Gravatar
    Cleber Colantoni

    Cara, independente de ter mais alternativas que funcione ou não, você esta de parabéns, realmente funciona, mas o que eu gostaria muito de comentar, é que muita gente acha que sabe tudo e fica escondendo o peixe (informação), mas você é dos meus, informação gratuita para todos, muito bom mesmo!

    1. Gravatar Guilherme Müller

      Obrigado Cleber,
      O que eu puder colocar de informação útil aqui certamente o farei. Fique atento também para o curso básico de HTML e CSS que estarei lançando em breve!

  16. Gravatar
    Azziz Vicentini

    Quer uma forma muuuiito mais facil?
    aqui vai:
    mude essa linha:
    #fundoFoto img {min-width: 100%;min-height: 100%;position: absolute;}
    e remova todo javascript que voce fez pois com isso o navegador ja faz tudo sozinho e nem precisa de css3 !

    testado no IE 7,8,9 FF e Chrome, só não testei no IE6

  17. Gravatar
    Azziz Vicentini

    só corrigindo não é #fundoFoto é só #fundo

    #fundo img {min-width: 100%;min-height: 100%;position: absolute;}

    1. Gravatar Guilherme Müller

      Obrigado pela dica Azziz! Não tinha pensado nisso.
      O funcionamento deste código pode ser satisfatório para alguns casos, mas não é igual à técnica que estou passando. Com a técnica javascript (ou CSS3), perceba que o redimensionamento da imagem funciona de forma diferente. Mesmo assim, obirgado pelo ponto de vista alternativo.

  18. Gravatar
    Edvaldo Rocha

    Opa, obrigado pelo belo post.
    Estava procurando algo assim pra um site meu mesmo que quero implantar aqui.
    Nao manjo nada de html nem javascript nem css, mas comecei estudar tudo isso e espero logo estar sabendo algo sobre.

    Uma duvida no dreamwaver quando clico em ver a compatibilidade do browser ele diz que nao é compativel com alguns browsers, posso ter problemas com isso ?

    Sendo que só testei no I.E 8, Chrome, e Firefox 9.

    Abraços e obrigado novamente.

    1. Gravatar Guilherme Müller

      Que bom que o post foi útil para você.
      Quanto a compatibilidade, não sei sobre a confiabilidade do Dreamweaver em relação a isso. Portanto é mais importante testar nos próprios navegadores e, se possível, em outros computadores também e com outros usuários.

  19. Gravatar
    Vinicius

    Não estou conseguindo deixar a div em 100% da tela alguem pode me ajudar

    HTML


    conteudo



    CSS

    html, body, #wrap {height: 100%;}
    body > #wrap {height: auto; min-height: 100%; background:#966;}
    #main {padding-bottom: 40px; background:#F00;} /* deve ser a mesma altura do rodapé */
    #footer {
    width:100%;
    background:#333;
    position: relative;
    margin-top: -40px; /* A mesma altura do rodapé, o valor deve ser negativo */
    height: 40px;
    clear:both
    }

  20. Gravatar
    Edvaldo Rocha

    Guilherme, descuido meu, se eu tivesse lido o codigo teria visto que nele proprio diz:

    background: #FFF; /* fundo branco para navegadores que não suportam rgba */

    Testei em mais aguns navegadores e tudo tranquilho.

    Obrigado novamente.

  21. Gravatar
    Bruno Serejo

    Parabéns pela iniciativa Guilherme. Todos pela democratização do conhecimento. Perfeito.

    Me tira só uma dúvida. Qual o tamanho padrão das imagens que você usou, pois acho que se a imagem for muito pequena irá distorcer quando visualizada em um monitor com resolução muito alta. E vice-versa.

    Ou estou errado?

    Mais uma vez. Parabéns.

    1. Gravatar Guilherme Müller

      Obrigado Bruno!

      Neste exemplo não lembro que tamanho de imagem que utilizei, pois usei um serviço para servir a imagem.
      Mas o que eu sugiro é utilizar um tamanho que ofereça suficiente qualidade, pois os navegadores hoje lidam bem com a redução e espansão de imagens.
      Sim, se for muito pequena, vai distorcer em telas maiores. Se a imagem for muito grande, não acho que vai distorcer tanto em telas menores, mas estas pessoas terão que baixar uma imagem enorme para vê-la "pequena". Ainda não existe solução definitiva para isso, mas existem serviços que servem a imagem de acordo com o tamanho da tela, para economizar largura de banda. Se você pesquisar encontra (não lembro agora o nome dos sites).

  22. Gravatar
    Bruno Serejo

    Olá Guilherme. Cara não estou conseguindo rotacionar as imagens. Acredito que esteja faltando algum plugin para a jQuery. Quando direciono para o endereço do plugin do site da Berlim que você fez por exemplo, dá certo. Onde encontro esse plugin para salvar na pasta local?

    Fico no aguardo, até mais.

    1. Gravatar Guilherme Müller

      Se não me engano usei o jQuery Cycle:
      http://jquery.malsup.com/cycle/

      Qualquer coisa basta ver o código fonte do site da Berlim.

  23. Gravatar
    Bruno Serejo

    Blz. Guilherme consegui fazer aqui ficou lindo hehe. Percebi que a barra de rolagem não aparece mesmo redimencionando a janela do navegador, neste caso, tenho que fazer com que meu conteúdo sempre caiba na janela. Ou seja, não poderei utilizar textos grandes que necessitem de rolagem.

    É mais ou menos isso?

    1. Gravatar Guilherme Müller

      Fazer um site que sempre fique inteiro na tela apresenta vários desafios. Você pode navegar no site da Berlim para ver como que eu resolvi o problema de texto. O site acessa bem até em telas bem menores, apenas para celulares que teria que fazer alguns ajustes. Você consegue trabalhar com uma quantidade de conteúdo maior desde que saiba como resolver os problemas das resoluções menores e maiores (os extremos).

  24. Gravatar
    diego Xavier

    Boa tarde guilherme, eu nao tenho conhecimento em css, mas estou tentando. Meu problema e o seguinte:
    Nao estou conseguindo fixar um arquivo flash para que ele fique no meio da tela na raiz site da div, a resolucao do mesmo e de 1000 x 600, mas quando adiciono o mesmo fica para o lado direito da tela. Sera que pode me ajudar passando o codigo do mesmo.
    Obrigado e parabens pelo tutorial.

    1. Gravatar Marcus Vinicius

      Olá Diego.

      Tente fazer da seguinte forma:
      -- No html

      ARQUIVO EM FLASH


      -- Na CSS

      .flash{
      width: 1000px /* Neste caso coloquei o tamanho do seu flash*/
      margin: 0 auto;
      }

      Acho que desta forma pode funcionar, qualquer coisa posta aqui de novo!

      Abraços.

    2. Gravatar Guilherme Müller

      Olá Diego,

      Teria que realmente ver o código do site que você está fazendo e também como você está inserindo o arquivo flash na página. De qualquer forma, há vários tutoriais na internet (nenhum aqui no blog por enquanto) que explicam como se centraliza um elemento no documento. Eu, pessoalmente, uso position: absolute; quando isso realmente é necessário, mas esta técnica também tem seus problemas.
      Mas continue estudando CSS, pois é uma linguagem muito interessante e essencial para construir websites!

  25. Gravatar

    Muito boa a dica, parabéns! Era o que estava precisando para finalizar um projeto! Muito obrigado.

  26. Gravatar

    Postei um código em HTML para auxiliar o Diego na dúvida dele mas não apareceu no post...

    era

    div class=flash

    ARQUIVO EM FLASH

    /div

    Coloquei sem os para ver se passa no blog.

    Abs e desculpa o flood.

    1. Gravatar Guilherme Müller

      Olá Marcus,

      Tudo bem. O blog ainda está na configuração inicial e ainda não tive muito tempo para ver isso. Acho que as tags realmente não sairão no comentário. Mas acho que dá para ter uma ideia (por enquanto usemos a imaginação).

  27. Gravatar
    Guilherme Machado

    Fala Guilherme!

    Estou usando este recurso no site de um cliente, mas não quero que a imagem fique no centro da tela.
    Preciso da imagem alinhada no topo/esquerda.
    Ainda, meu menu será superior, tem como a imagem começar abaixo do menu?

    Abraços!

    GMachado!

    1. Gravatar Guilherme Müller

      Para isso você terá que trabalhar com as áreas ocupadas pelo menu e pela imagem para conseguir que eles não se sobreponham. E para mudar o alinhamento, basta verificar a parte específica da script que lida com isso e trabalhar com ela.

  28. Gravatar
    Marcos Narciso

    Olá Guilherme,

    Parabéns pelo artigo. Descobri o seu site pesquisando no Google, exatamente quando estava precisando fazer algo assim. Vou agora por em prática seus ensinamentos e ver o que consigo fazer. Obrigado.

    Marcos Narciso
    Natal/RN

  29. Gravatar
    Harrison

    Guilherme Müller, você esta dando muita volta para fazer uma coisa basica.

    olha só em HTML você coloca:



    e em CSS:

    #bg{
    position:fixed;
    left:0;
    top:0;
    z-index:1;
    height:100%;
    width:100%;
    }

    Simples assim.

    1. Gravatar Guilherme Müller

      Olá Harrisson,
      Perceba que, assim como o outro comentário que foi postado aqui, apresenta uma solução diferente. Primeiramente, este código que você passou já está no CSS como fallback. Segundo, ele não apresenta o mesmo comportamento que a script apresentada. Redimensione a janela para comparar. Na solução que apresento, tanto a Javascript quanto a CSS3, a imagem sempre se adapta à tela, tomando a largura ou a altura como referência, assim sempre mostrando o máximo da imagem possível. Utilizando apenas largura 100% e altura 100%, isso não acontece, podendo haver cortes maiores na imagem. Isso era especialmente indesejável no site do cliente onde precisei aplicar esta técnica. Então as "voltas", acredito, são justificadas.

  30. Gravatar
    Harrison

    Ops HTML:

  31. Gravatar
    Harrison

    Afff não vai.
    coloca igual o que você colocou para inserir a imagem:
    img id="bg" src="http://flickholdr.com/1600/1200/sunset" alt=""
    só que bota uma id="bg" e o restp é o css ai em cima.

  32. Gravatar

    Valeu Guilherme ajudou demais!
    Só preciso de uma ajudinha, se possível.
    Quero fazer uma transição semelhante ao site que você mostrou de exemplo.
    Seria de grande ajuda se puder me dizer como faz a transição com mais imagens :D
    Abs.

    1. Gravatar Guilherme Müller

      Olá Rodrigo,
      Para isso, peço para que veja o código fonte do site da Berlim (referenciado no começo do tutorial). Usamos a div #imagens justamente para poder colocar mais imagens dentro. O plugin é o jquery.cycle.

  33. Gravatar
    Rodrigo Antinarelli

    Vou dar uma olhada sim, obrigado!

  34. Gravatar
    Rodrigo

    Brother, tu é um gênio! (reverência). Parabéns!

    1. Gravatar Guilherme Müller

      Obrigado, mas não é para tanto hehe... Apenas fico feliz que tenha sido útil.

  35. Gravatar

    Amigo, eu consegui fazer aqui. Mas dá uma olhada, verifique um bug.
    http://www.rodrigoantinarelli.com/aureum/index.html
    Quando eu abro o site, tudo bem, funciona certinho. Mas a partir da segunda imagem, se eu aperto ctrl - perde o script de fit q vc fez.
    Se tiver como dar um help, valeu! :D

    1. Gravatar Guilherme Müller

      Olá Rodrigo,
      Pelo que vi, está funcionando certinho... A questão do ctrl - vai depender muito do navegador. Como é uma funcionalidade do navegador em si, fica difícil prever o comportamento da script. Além disso, enquanto a imagem está carregando, a script não aplica (apenas após o carregamento completo). Portanto algo que pode ajudar seria utilizar imagens mais leves e menos imagens no slideshow para acelerar o carregamento e minimizar os problemas.

  36. Gravatar
    Skylerlive

    Como eu faço pra colocar um MENU por cima disso?

    1. Gravatar Guilherme Müller

      Da mesma forma que a div com conteúdo foi colocada por cima: trabalhando com position: absolute. A técnica tem limitações mas basta saber trabalhar com elas.

  37. Gravatar
    Skylerlive

    Eu poderia adicionar você no MSN pra tirar algumas dúvidas?

    1. Gravatar Guilherme Müller

      Desculpe, mas não uso MSN nem nenhum software de mensagens instantâneas. Mas fique à vontade para enviar um e-mail.

  38. Gravatar

    Depois de procurar muito na net, finalmente uma solução "enxuta" e altamente eficiente. Parabéns e obrigado por compartilhar!

  39. Gravatar
    task

    mano demais a meses que estou buscando isso

  40. Gravatar
    Gustavo Henrique

    Parabéns cara, passei por vários sites de sobre o assunto acima e muitos são prolixos.
    Vi seu Portfólio, um dia se Deus permitir chego onde suas abilitades se encontram rs, vou criar meus sites de maneira fácil e rápida.
    Parabéns amigão!

    1. Gravatar Guilherme Müller

      Obrigado!

  41. Gravatar
    Cristina

    Boa noite, Guilherme

    O Sr. explicou tão direitinho.. desde 2008 tento colocar uma rosa no fundo do meu blog mas pelo que vi, seus ensinamentos servem só para sites =/ Se o Sr. souber de uma pessoa que possa me ajudar e a outras centenas de leigos, encarecidamente, nos ajude tb. Blogger nem tem CSS, é tudo no html, tem um "campo" aonde inserir CSS mas não sei em que parte inserir esses códigos.. enfim, cheguei perto.

    Espero voltar tão feliz qto essas pessoas que te agradeceram.
    Sucesso

    1. Gravatar Guilherme Müller

      Olá Cristina,
      Trabalhar com Blogger é um pouco mais complicado pois ele é um sistema mais fechado e, mesmo sendo disponibilizada a edição do HTML e CSS, acredito que ficaria mais complicado fazer uma script como essa funcionar. Por isso a minha sugestão seria trabalhar com outras técnicas de imagem de fundo (por exemplo um padrão repetindo no fundo da tela).

  42. Gravatar
    Paulo

    Cara, muito obrigado pela iniciativa! Ás vezes é complicado encontrar informação tão bem organizada!

    E parabéns pelas criações, seus clientes com certeza devem ficar bastante satisfeitos!

  43. Gravatar
    JOSÉ LOPES

    meu site www.graficapolam.com.br não roda os banners rotativos no IE 9.
    tem como me dar alguma dica.
    No Chorme no firefox rodam normalmente.

  44. Gravatar
    Mariana

    Olá, nao consigo fazer o conteudo do meu site redimensionar junto com a imagem! Como poderei arrumar isso? Obrigada

  45. Gravatar
    Daniel Banik

    Hi Guilherme,

    Just a quick note to thank you for your kind comments about our website.

    You might be interested to know that we have commenced plans to 'retire' our this website. As we say in Australia, it has had a 'good innings' - nearly five years.

    We can only hope that our next attempt is as well received.

    Thanks again.

    1. Gravatar Guilherme Müller

      Hi Daniel,
      Thank you for your comment! Certainly, your website has served as reference for many webdesigners throughout these years, 'good innings' indeed.
      Looking forward to the next then!

      And I'm curious, how did you find my website?

      Cheers

  46. Gravatar
    Giovanni

    Guilherme suas dicas são incríveis cara, estou utilizando muita coisa que aprendi aqui no seu site.

    Bom só que estou com um desafio aqui para poder aprender mas não estou conseguindo, peguei um site de um cliente para renovar o design dele, só que o design que estou criando trabalha com uma div que vai ficar seguindo a imagem principal no topo. Um exemplo bom que posso lhe dar é o topo de seu site. Se eu redimensionar meu navegador tanto diminuindo como aumentando, percebe-se que essa container branca fica posicionada sempre no mesmo local da imagem do topo :-). ou seja, essa container vai seguindo o topo sem deslocar-se da mesma posição da imagem.

    Cara estou com essa parte para desenvolver que é urgente pois o layout desenvolvido necessita disso. Se possível você criar uma aula ensinando a posicionar o topo desta forma eu ficaria muito grato. Mais do que já estou pelas aulas disponíveis :p

    Um forte abraço. Sucesso!!! Estou no aguardo de uma possivel resposta :p

    1. Gravatar Guilherme Müller

      Olá Giovanni,
      Fico contente de saber que você aprendeu novas técnicas aqui no site. Sobre a sua dúvida, na verdade é bem simples: utiliza-se divs com 100% da largura do site, como a imagem no topo que estou usando nesta versão do layout. Para elementos que você deseja ter largura fixa, como a área de conteúdo neste site, basta usar uma div com largura fixa (ou max-width, como usei aqui) e margin: 0 auto; para que ela fique centralizada na horizontal. É só isso.

  47. Gravatar
    Andreson

    Esse aqui fica perfeito.

    html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    1. Gravatar Guilherme Müller

      Sim, esta é uma maneira, como também foi apresentado no final do post. Vendo o seu comentário, vi que tinha esquecido do "no-repeat"! Agora já foi corrigido.
      Aliás, parabéns pelo seu trabalho!

  48. Gravatar
    Vanessa

    Olá eu utilizo um template que modifiquei para meu site, porém gostaria de colocar uma imagem no plano de fundo do site que ocupasse toda a janela do navegador, já procurei muitos posts no google mas como não entendo quase nada fico bem perdida. Você poderia me ajudar? Onde devo colocar a imagem e onde coloco os códigos?
    Desde já agradeço.

  49. Gravatar
    Márcia

    Guilherme, será que vc poderia me ajudar com uma questão de CSS3? Se, sim, é o seguinte:


    quero usar a propriedade background-size para fazer com que um a imagem aplicada ao body se adapte a qualquer resoloução de tela, conforme vc apresentou aqui no seu post:


    body {
    background: url(img/imagem.jpg) no-repeat center top;

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

    O probleam começa quando eu coloco a div container com posionamento relativo para que possa trabalhar com as demais div com posionamento absoluto. Parece que esta ação impede o funcionamento do background size, porque a partir da determinação do posicionamento absoluto das divs , ele para de funcionar... Seria isso?

    1. Gravatar Guilherme Müller

      A propriedade background-size está aplicada a body. Portanto, não influi nem tem influência sobre o que é determinado sobre outras divs. A questão neste caso deve ser outra.

      1. Gravatar Márcia

        Valeu, Guilherme, pela resposta. Mas realmente o problema está acontecendo e deixa de acontecer quando eu mudo o tipo de posicionamento da div container. De qualquer forma, obrigada.

  50. Gravatar
    stanley

    fiquei fã cara! parabens, vou sempre vir aki agora, e quero pedir um efeito, do site estar funcionando normal, e em uma seção tem um slide show, como fazer para quando chegar nessa seção, somente as fotos do slide ir para a pagina inteira

    1. Gravatar Guilherme Müller

      Obrigado! Quanto à mudança de imagens, veja o site da Berlim Ambientes (citado no post). Lá fiz um efeito parecido. Basta ver o código fonte.

  51. Gravatar
    Evandro

    Nossa quanta gente que se deparou com esse mesmo problema, gostei muito do tópico. Eu estou tentando desenvolver em HTML5 e CSS3, no entanto há muito a aprender ainda. Esse post foi muito útil,
    se compartilharmos as técnicas que vem surgindo com a implementação do HTML5 e o CSS3, tenho certeza que nossas vidas ficaram cada vez mais fácil.

  52. Gravatar

    Parabéns Guilherme, Post simples e bem explicado!

  53. Gravatar
    Carlos Silva

    Guilherme,

    O site indicado por você, possui uma imagem de fundo em forma de logomarca (http://css-tricks.com/perfect-full-page-background-image/)
    O processo desse tipo de fundo é igual ou diferente daquele que você ensinou?

    1. Gravatar Guilherme Müller

      É difícil dizer porque o dono do site acabou de mudar o layout... Seria do novo ou do antigo? Mesmo assim, acho que deve ser outra técnica. Inspecionando com uma ferramenta como o Firebug você consegue descobrir. Uma técnica que sei que é usada no site são as Media Queries, para que o site se adapte para diferentes tamanhos de tela (farei um post sobre isso no futuro).

  54. Gravatar
    Marco Aurélio Schneider Loureiro

    Primeiro gostaria de lhe dar os parabéns, muito bem explicado e didático. Desculpe pela dúvida que tenho, é que estou aprendendo a fazer sites e estou com uma dúvida bem idiota, mas que não consegui resolver ainda. Estou fazendo um site com um background simples, no entanto, quero deixar 2 faixas horizontais em cima (parecido com o do site www.supersomacessorios.com.br), como faço isso? Teria que criar um background dessa forma ou existe algum comando direto?
    Muito obrigado pela ajuda.

    1. Gravatar Guilherme Müller

      Obrigado Marco! Quanto a sua dúvida, é geralmente simples fazer algo assim. Basta ter uma imagem das duas faixas e colocá-la como background repetindo indefinidamente no eixo x (background-repeat: repeat-x;) da tag body, por exemplo. Como tudo em desenvolvimento de frontend, há várias formas de se resolver um problema. Você pode também instalar o Firebug e ver como o efeito foi criado no site de referência.

  55. Gravatar
    Yuri

    Olá Guilherme, primeiramente parabéns, tbm vi o vídeo no youtube e com sua explicação fica mais fácil ainda.
    Porém tenho uma dúvida remanescente: eu creio que a imagem deve ter uma dimensão máxima a fim de "cobrir" todas as resoluções de tela possíveis de usuários, certo? Explico: se a imagem que eu coloco no fundo for menor que uma resoluçao de tela, obviamente ela nao vai preencher a tela inteira ou talvez ficará numa qualidade ruim. Portanto minha dúvida é em qual dimensão devo colocar essa imagem para que ela fique certa em todas as resoluções. Digo, existe uma dimensão padrão para que a imagem assegure uma vizualizaçao correta nas diversas resoluções que existem?

    Isso nos leva a uma questão mais profunda: a programação CSS sabe qual é a resolução do usuário e faz a adaptação automaticamente?

    bom, é isso. Nao sei se é uma dúvida primária mas como sou iniciante gostaria de saber.
    Muito obrigado!

    1. Gravatar Guilherme Müller

      Olá Yuri,

      Tanto a técnica Javascript quanto a técnica CSS3 que apresento aqui e no vídeo adaptam qualquer imagem a qualquer resolução. Sim, se a imagem for menor que a tela, haverá perda de qualidade. Além disso, se a imagem é muito grande e você abre o site em um celular, por exemplo, você está gastando à toa largura de banda do celular do usuário para fazer o download de uma imagem grande. Esse é o desafio dos desenvolvedores hoje. Há técnicas surgindo para que consiga-se servir a imagem correta para cada tipo de dispositivo, seja usando media queries e/ou javascript. O negócio é pesquisar e usar o que for melhor para o seu projeto. Hoje também temos os dispositivos com maior densidade de pixels (como os "retina" da Apple) que adicionam ainda mais uma variável nesse cenário.

      Não existe tamanho padrão, como temos muita variação de resolução nos dispositivos hoje, o ideal é ter uma abordagem "responsive" (veja Responsive Web Design) e pesquisar as técnicas mais recentes. Além do Curso de HTML e CSS que lancei agora, estou criando outro nesta área, aguarde!

      1. Gravatar Yuri

        Maravilha Guilherme, obrigado pela rápida resposta.
        Há alguns dias já estou pesquisando sobre design responsivo e de fato trata-se de um recurso que será cada vez mais necessário.
        Mais uma vez parabéns pelo ótimo trabalho.
        Abraços!

  56. Gravatar
    Marcio

    Parabéns pelo post. Simples e funcional....

  57. Gravatar
    Marcio

    Olá Guilherme,
    Aqui vc utilizou a div site com 560px e esta centralizou legal.
    No meu caso, precisaria deste container com tamanho em 980px. como faria para centraliza-la nesta técnica?

    grato pela atenção.

    1. Gravatar Guilherme Müller

      Olá Marcio,

      Há duas técnicas principais para centralizar na horizontal desta forma. A mais simples é colocar apenas margin: 0 auto; (margem automática na horizontal). Desde que o elemento esteja com uma largura definida, deve funcionar.

      Porém, no exemplo deste post onde usei javascript, precisei posicionar a div de forma absoluta na tela (position: absolute). Portanto, coloquei o valor left como 50% e aí uma margem negativa, margin-left, igual à metade da largura da minha div. Esta é uma outra técnica, usada para centralizar um elemento que está posicionado absolutamente.

  58. Gravatar
    Julio Cesar

    Ótimo Conteúdo!
    Me Ajudo a Melhorar um pouco o que eu já sabia...

  59. Gravatar
    Wesley

    Fiz no meu blog usando CSS. A imagem ficou legal, mas as letras do texto mudaram de cor, estava branca e ficou preta. Como resolver isso?

    1. Gravatar Guilherme Müller

      Verifique seu código CSS. Alguma parte do código deve ter alterado a cor da fonte. Você pode usar uma ferramenta como o Firebug ou o conjunto de ferramentas para desenvolvedor que vêm com o seu navegador para auxiliá-lo nisso.

  60. Gravatar
    sebastian

    alguém conhece algum curso bom sobre os assuntos comentados aqui?

    1. Gravatar Guilherme Müller

      Olá Sebastian,

      Não conheço um curso específico deste assunto tratado aqui no post mas, se tiver interesse, posso dar um curso por Skype personalizado com os assuntos que você deseja desenvolver. Qualquer coisa, entre em contato.

  61. Gravatar
    Lucas Sodre

    Parabens pelo tutorial, muito bom mesmo.

  62. Gravatar
    Zezinho

    Parabens muito bom, por favor como adiciona estes cods principalmente o javascript num tema wordpress

    abs
    Zezinho

    1. Gravatar Guilherme Müller

      Olá Zezinho,
      Não mexo muito com Wordpress, mas acredito que você deva incluir a script no include header.php do tema (ou no footer.php, se você carrega scripts no final da página) e fazer o uso da função javascript de acordo. Também confira o post atualizado que está neste site, lá há uma script um pouco mais eficiente.

  63. Gravatar
    david junior

    CARA QUE FERA A MUITO TEMPO PROCURO ISSO E SO AQUI ENCONTREI,
    BRAVO, VC É FERA XD

  64. Gravatar
    Marcus Vinicius Braga

    Muito obrigado...essa dica do CSS3 é valiosa! heheh

  65. Gravatar
    PAULO ROBSON

    Muito bom amigo ajudou de mais

  66. Gravatar
    Fabricio Alexandre

    Existe alguma alternativa para quando não se tem acesso ao head?

    1. Gravatar Guilherme Müller

      Olá Fabricio,

      Se você está trabalhando com um sistema de blog fechado ou algo assim, você pode tentar carregar as scripts no final do documento (antes da tag </body>); apenas lembre de executá-las quanto o documento estiver carregado. Já quanto ao CSS, geralmente há alguma forma de editá-lo neste tipo de sistema. Apenas não recomendo que você carregue arquivos CSS via tags <link> ou <style> fora da tag <head>, pois isso não é HTML válido (ainda).

  67. Gravatar
    cristiane

    Tem como fazer isso na linguagem HTML?

    1. Gravatar Guilherme Müller

      Olá Cristiane,
      HTML tem a função apenas de estruturar o conteúdo de uma página semanticamente (o que é um título, o que é um bloco de conteúdo, etc). A linguagem não tem nenhuma função visual. Por isso, para mexer com imagens desta forma, as opções são CSS e/ou Javascript.

  68. Gravatar
    Rafael W.

    Perfeito para o que eu precisava. Funcionou direitinho!
    Agora, a dúvida: como utilizo o mesmo código (sem o CSS3) com fundo aleatório? Tenho esse código aqui abaixo, mas não consigo mesclá-los. =/
    Espero que você ainda dê algum suporte aqui Guilherme rsrs
    Seu site tem ajudado muito ultimamente!

    &lt;head&gt;
    [removed]
    var randon = Math.random();
    var num = 4;
    var rand1 = Math.round(randon * (num-1)) + 1;
    images = new Array
    images[1] = "imagens/fundo1.jpg"
    images[2] = "imagens/fundo2.jpg"
    images[3] = "imagens/fundo3.jpg"
    images[4] = "imagens/fundo4.jpg"
    var image = images[rand1]
    [removed]
    &lt;/head&gt;

    &lt;body&gt;
    [removed]
    [removed]('&lt;body background="' + image + '" text="white"&gt;')
    [removed]
    &lt;/body&gt;

    1. Gravatar Guilherme Müller

      Olá Rafael,

      O código veio um pouco comprometido por causa dos mecanismos de segurança, mas deu para entender. Você não precisa por scripts no meio do documento para substituir a imagem de fundo. Há outras maneiras menos intrusivas de fazer isso (sem mexer no HTML).

      Por exemplo, se você tem uma tag <img id="teste"> no documento, no javascript você pode fazer isso (após a página carregar e etc):

      var img = document.getElementById('teste');
      img.src = "endereco/para/imagem";

      Agora se você tem um background aplicado à tag body, identifique a tag com uma id (vamos supor "teste") e aí pode ser feito dessa forma:
      var body = document.getElementById('teste');
      body.style.backgroundImage = "url(endereco/para/imagem)";

      Espero que tenha ajudado. Abraço

  69. Gravatar
    Rafael W.

    Olá novamente Guilherme! Desculpe a falha com a mensagem anterior, nem reparei que o código seria cortado rsrs Não sei como responder o seu comentário sem criar um novo, então ecreverei por aqui.

    A página que estou criando: http://smlab.com.br/new.html
    Nela apliquei o que aprendi com você nesse site.
    Fiz o que me explicou na resposta e deu certo para uma imagem de fundo, mas como identifico mais de uma para mudar quando entrar na página novamente?
    É só aplicar mais tags? O código que mencionei no outro comentário está nessa página aqui: http://smlab.com.br/teste.html (é aleatório, atualize algumas vezes que começa a mudar)

    Vou continuar tentando aqui, e amigo, muito obrigado mesmo pela ajuda!
    Por diversas vezes encontrei conteúdos no seu site e nem sequer sabia que você ainda respondia perguntas aqui rsrs

    1. Gravatar Guilherme Müller

      Olá Rafael,

      Então, o código de colocar imagens aleatórias que você está usando está colocando as imagens como background diretamente na tag body. Há maneiras muito melhores de fazer isso, já que o código javascript não teve ser tão intrusivo na página. Você pode mudar o background da tag body selecionando-o por id ou classe e aí acessando a propriedade "element.style.backgroundImage", por exemplo. Link: http://www.w3schools.com/jsref/prop_style_backgroundimage.asp. Tendo o background aleatório, com background-size: cover você preenche toda a tela.

      Já o código javascript que mostro no post só pode ser usado com tags img, o que aí já muda um pouco a técnica. Se quiser mais informações, podemos agendar uma aula via skype.

      Abs,
      Guilherme

  70. Gravatar

    Muchas gracias, me ayudó mucho tu post.

  71. Gravatar
    Silvana Capita

    Foi-me muito útil.
    Obrigada

  72. Gravatar
    thamiris

    Olá queria saber como aumentar a imagem do background eu coloquei os atributos(height e width/size) nenhum funcionou quero ajuda!!!

    1. Gravatar Guilherme Müller

      Olá Thamiris,

      Fica difícil saber sem um exemplo de código. Coloque o código em um serviço como o CodePen (codepen.io) e aí posso dar uma olhada.

  73. Gravatar
    Caio

    Guilherme boa tarde.
    estou fazendo um site com o template como uma unica imagem.
    Usei o codigo para que essa imagem ajuste ao tamanho da tela.
    Mas o menu eu fiz separado, o menu é um drop down, aparece certinho, mas quando passo o mouse pro dropdown descer, a imagem que está o seu código ela fica por cima do dropdown.
    Sabe como arrumar isso para que o dropdown sobrescreva a imagem com o css ?

    Obrigado

    1. Gravatar Guilherme Müller

      Olá Caio,

      Neste caso, basta utilizar a propriedade CSS "z-index". Coloque na imagem o z-index de 1, por exemplo, e no menu coloque 100. Aí o dropdown deve ficar por cima.

  74. Gravatar
    Caio

    Guilherme, vim agradecer sua ajuda, me ajudou demais.

    com o "z-index" o menu está sobre a imagem, agradeço sua ajuda.

    Pelo que notei a numeração indica qual fica por cima de qual.

    Ótimo trabalho.

Comente