· · 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)

Download dos Arquivos de Exemplo

Link complementar: Perfect Full Page Background Image (CSS Tricks)


23 Comentários

  1. Gravatar
    mario costa

    valeu a dica, muito bem explicada.

  2. Gravatar
    Matheus Reis

    Muito boa dica!

  3. Gravatar
    maiara

    ooi Guilherme, gostaria de saber como fazer pra trocar a imagem de fundo, como se ela fosse um gif, pode me ajudar?

    1. Gravatar Guilherme Müller

      Olá Maiara,

      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.

  4. Gravatar
    josenildo

    Excelente Screencast, irá me ajudar em todos os projetos. muito obrigado!

  5. Gravatar
    Daniel

    Oi Guilherme

    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?

    1. Gravatar Guilherme Müller

      Olá Daniel,

      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.

  6. Gravatar
    Silvio Vik

    Cara, muito obrigado por compartilhar isso com a gente. Você foi um anjo em minha vida.

  7. Gravatar
    Bruno

    Obrigado pela iniciativa. Me ajudou muito.

  8. Gravatar
    Roberto Guerreiro

    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..
    parabens!!

  9. Gravatar
    Roberto Guerreiro

    opaa parabens pelo tutorial..

    mas cara nao sei o que acontece!

    Qdo eu coloco essa parte no css:

    #fundo {
    position: fixed;
    width: 100%;
    height: 100%;
    }


    o meu rodape desaparece.. nao sei se ele fica atras da imagem!

    o q ta acontecendo?


    mto obrigado

    1. Gravatar Guilherme Müller

      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.

  10. Gravatar
    Ed

    Excelente post, Guilherme!

    Me ajudou muito em um job recente.
    Parabéns e sucesso.

  11. Gravatar
    Arnaldo José da Silva

    muito cara continua com essa força

  12. Gravatar
    Ronny Wdson

    Maravilha

    Beleza de post.... parabéns

  13. Gravatar
    Marcio Vinicius Silva

    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.

    1. Gravatar Guilherme Müller

      Valeu Marcio, fico feliz que tenha ajudado.

  14. Gravatar
    Abner Araujo

    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.

    1. Gravatar Guilherme Müller

      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.

  15. Gravatar

    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.

    abs,

    Odon

    1. Gravatar Guilherme Müller

      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!

  16. Gravatar
    rodrigo azevedo

    Olá Guilherme, acompanho seu blog há um tempo e essa dica é muito boa!

    Fiz algo parecido, antes de encontrar o post, realmente é muito útil!

    Bom trabalho e sucesso!

    Abraços,

    1. Gravatar Guilherme Müller

      Obrigado!

Comente