Screencast: Como Fazer Uma Imagem de Fundo Preencher a Tela Inteira – Guilherme Müller - Web Developer
04/09/2012	 · CSS · HTML · JavaScript · Screencasts · Tutoriais · Vídeos · 23
Screencast: Como Fazer Uma Imagem de Fundo Preencher a Tela Inteira
Devido à grande procura deste tópico no meu site, resolvi fazer um screencast para demonstrar duas técnicas diferentes de preenchimento da tela com uma imagem de fundo: uma com CSS3 e uma com JavaScript. Na versão JavaScript, atualizei o código para uma versão melhor e mais estável. (Veja o post original aqui)
Link complementar: Perfect Full Page Background Image (CSS Tricks)
mario costa	 02/01/2015
valeu a dica, muito bem explicada.
Matheus Reis	 15/07/2014
maiara	 04/05/2014
ooi Guilherme, gostaria de saber como fazer pra trocar a imagem de fundo, como se ela fosse um gif, pode me ajudar?
Guilherme Müller	 05/05/2014
A forma que uso para fazer isso é usar um sistema de slideshow como o jQuery Cycle 2. Para que a imagem troque e continue se adaptando à tela, é necessário adaptar o código javascript mostrado no post.
josenildo	 06/04/2014
Excelente Screencast, irá me ajudar em todos os projetos. muito obrigado!
Daniel	 23/01/2014
Utilizamos essa sua ideia, no entanto tivemos um problema quando ele é visualizado no IPAD, e clicamos em um campo de busca, a altura da página é alterada para entrada do teclado com isso, o tamanho da imagem não funciona mais, já passou por isso?
Guilherme Müller	 24/01/2014
Não cheguei a encontrar este problema ainda, mas acredito que possa ser alguma questão do iPad em si. Principalmente se você está ajustando o background com CSS, não sei se há mais algo que possa ser feito para resolver este problema. Mas seria necessário investigar com tempo o problema para verificar com certeza.
Silvio Vik	 22/11/2013
Cara, muito obrigado por compartilhar isso com a gente. Você foi um anjo em minha vida.
Bruno	 02/07/2013
Obrigado pela iniciativa. Me ajudou muito.
Roberto Guerreiro	 15/05/2013
aee Guilhermee.. eu tinha tentado usar o z index mas nao tinha dado certo.
Agora com seu comentario, entendi melhor.. e consegui arrumar tudo!
Mto obrigado pela atençao e o tutorial..
Roberto Guerreiro	 14/05/2013
opaa parabens pelo tutorial..
mas cara nao sei o que acontece!
Qdo eu coloco essa parte no css:
o meu rodape desaparece.. nao sei se ele fica atras da imagem!
Guilherme Müller	 15/05/2013
Quando você usa position: fixed ou position: absolute, você tira o elemento do fluxo do documento. É como se você retirasse este elemento da página. Por isso, ele irá aparecer em cima de todos os outros, em uma espécie de ordenamento na terceira dimensão (eixo "z"). Dá para mudar um pouco este tipo de comportamento com a propriedade CSS z-index. Não tenho como detalhar tudo sobre position aqui no comentário, mas esta é a ideia básica.
Ed	 06/03/2013
Me ajudou muito em um job recente.
Arnaldo José da Silva	 15/02/2013
muito cara continua com essa força
Ronny Wdson	 12/02/2013
Beleza de post.... parabéns
Primeiro artigo que vejo e já resolveu meu problema! Você teve a preocupação de mostrar todos os pontos das duas opções, isso ajuda e muito.
Site favoritado.
Guilherme Müller	 01/02/2013
Valeu Marcio, fico feliz que tenha ajudado.
Abner Araujo	 13/01/2013
Olá, fiz na versão com JavaScript e deu certo, porém meu site não vai ter barra de rolagem. Mas acho que os cálculos do java estão para quando tiver barra, porque fica uma marca branca ao lado esquerdo.
Guilherme Müller	 14/01/2013
Olá Abner, na verdade não há distinção pois a barra de rolagem não influi no cálculo do tamanho da imagem. Testei aqui no meu exemplo sem a barra de rolagem e deu certo. Verifique o tamanho que a imagem deveria ter e se a script está dando o resultado esperado. Caso contrário, é necessário fazer um pouco de debug e encontrar o problema.
Odon Fernando de Lima	 10/01/2013
Sou novo na área, com alguma dificuldade de um aprendiz, estou construindo meu blog, sozinho tenho pesquisado, talvez isso tenha sido meu erro, mas tudo bem, sua matéria é simplesmente excelente, eu já pesquisei muito, creio que foi a única, " e que dica", parabéns, ótimo conteúdo, estou precisando de reforço para um conhecimento melhor.
Guilherme Müller	 10/01/2013
Obrigado Odon, estou preparando outros screencasts com técnicas úteis que publicarei nos próximos meses. Se está iniciando na área convido-o a fazer meu curso básico de HTML e CSS. Abraço!