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)
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.
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?
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.
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!!
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.
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.
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.
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.
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!
