Preciso criar um fundo para meu site no estilo mosaico
de fotos. Quando a página abrir, o fundo do site é preenchido por fotos, preenchendo a largura total da janela (ou seja, precisa ser responsivo) e uma altura determinada.
Clique aqui para ver um exemplo animado e um JSFiddle.
Pesquisei alguns plugins
e encontrei este aqui. Ele faz exatamente o que quero, porém, ele não trabalha com background
.
Vocês tem alguma sugestão de plugin? Ou de como posso criar esse efeito?
EDITADO
A estrutura que eu tenho para listar as imagens é algo parecido com isso:
<div class="bg-mosaico">
<img src="imagem 1" />
<img src="imagem 2" />
<img src="imagem 3" />
...
</div>
É simples, por isso acho que um plugin não seja necessariamente útil, e que eu posso criar uma função simples com o mesmo objetivo. Pesquisei e encontrei isto:
var imgMOSAICO = $('.bg-mosaico img');
imgMOSAICO.hide();
imgMOSAICO.each(function() {
$(this).delay( Math.random()*500+500 ).fadeIn();
});
Funciona, as imagens aparecem. O problema é que elas não aparecem uma a uma, elas aparecem quase que todas ao mesmo tempo. E eu preciso que elas fiquem fixas, pois tem que ter uma quantidade exata de imagens.. e dependendo da resolução, elas vão quebrando linha e não pode.
background
? Você diz "ao fundo...preenchendo largura total e determinada altura", consegue fazer uma boneca em CSS? . . . (acabo de ver que linkei errado acima, mas sim o JS do plugin)mosaico
preencheria a largura total da janela (ou seja, responsivo) e teria uma altura máxima. E em cima disso, o conteúdo do site.