Imagens aleatórias no background-image do css

CSS

10/07/2017

Fala galera, beleza?

Queria saber se tem algum jeito de carregar uma imagem de maneira aleatória na propriedade background-image no css.

Tenho uma pasta com 10 imagens e tenho uma página que precisaria carregar qualquer uma dessas 10 imagens numa determinada div.

Alguém tem ideia de como faço isso?
Bernardo Barbosa

Bernardo Barbosa

Curtidas 0

Melhor post

Arnold Santos

Arnold Santos

10/07/2017

Bom dia Bernardo, tudo certo ? Espero que sim
Olha so esse site: http://ericaepedrofaccio.com.br/novo/
Perceba que a cada inicialização do site, aparece um banner diferente !
Fiz isso com PHP, fazendo uma consulta aleatoria no banco. A consulta ficou mais ou menos assim: "SELECT * FROM banners ORDER BY RAND() LIMIT 1"

Com isso eu salvo numa variavel, e uso ela no meu front-end. Sempre que a pessoa atualizar o site aparece um banner novo. As vezes por nao ter uma quantidade muito grande de registros, a consulta pode te retornar o mesmo banner rsrs mas isso e dificil.

Espero que você tenha entendido.
Forte abraço !
GOSTEI 2

Mais Respostas

Calebe Menezes

Calebe Menezes

10/07/2017

Fala Bernardo, beleza?

Então cara, a forma apresentada pelo Arnold é uma das maneiras que você pode fazer. Se estiver usando o PHP pode utilizar o jeito que ele indicou. Mas se quiser fazer essa alteração no front-end você pode utilizar o JavaScript/Jquery para mudar as imagens de maneira aleatória.

Tenho quase certeza que que só com CSS isso não é possível,

Espero ter ajudado :)
GOSTEI 1
Bernardo Barbosa

Bernardo Barbosa

10/07/2017

Arnold e Calebe, obrigado pela resposta!

Tive que usar Jquery para resolver essa situação. Quebrei a cabeça tentando com css mas não consegui, mesmo pesquisando bastante.

Obrigado a todos!
GOSTEI 0
POSTAR