Imagem aleatória em página html

por Sapinho 24.07.17 17:29

Detalhes da questão

Endereço do fórum: http://perferctworldbrasil.forumotion.com
Versão do fórum: phpBB2

Descrição

Boa tarde caros.

Estou fazendo um forum do tema perferct world com uma pagina de login personalizada em html, mas gostaria que a imagem de fundo fosse aleatória a cada acesso, isso seria possível?

Código:: <title>Painel de login</title> <meta charset="utf-8" /> <style type="text/css"> @font-face { font-family: 'Sigmar One'; font-style: normal; font-weight: 400; src: local('Sigmar One'), local('SigmarOne'), url(http://themes.googleusercontent.com/static/fonts/sigmarone/v4/aRAZJs6CY7SV6eSg6Wx4jxsxEYwM7FgeyaSgU71cLG0.woff) format('woff'); } body{ margin: 0; font: 14px Lucida sans; background: #333 url('http://perfectworld.uol.com.br/database/midia/wallpaper/larger07.jpg') no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #fff; } a, a:active, a:focus{ text-decoration: none; color: #fafafa; } #logo{ font: 30px 'Sigmar One'; text-align: center; padding: 0; margin: 5em 0 0; text-shadow: rgba(0,0,0,1) 0 0 5px; } form{ margin: 0 auto; max-width: 50%; } #wrap{ width: 100%; background: rgba(255,255,255,.3); border-radius: 5px; text-shadow: rgba(0,0,0,.5) 1px 1px 0; box-shadow: rgba(0,0,0,.2) 0 0 3px; text-align: center; padding: 3em 1em; } hr{ margin: 1em; border: 0; border-top: 1px rgba(0,0,0,.2) solid; border-bottom: 1px rgba(255,255,255,.2) solid; } #register{ background: url('http://imgur.com/EK2ZA9X.png') repeat-x scroll 0px 0px #8FBE5F; box-shadow: 0px 1px 0px 0px #ADD08B inset, 0px 2px 3px rgba(0, 0, 0, 0.2); text-shadow: 0px -1px 0px #474747; border: 1px solid #51842F; border-radius: 3px; color: #FFF; cursor: pointer; padding: .3em 5em; display: inline-block; margin: 0 2em 1em; } #copyrights{ font-size: 13px; } </style> <form action="/login?"> <p id="logo"> Perfect World Brasil </p> <div id="wrap"> <a id="register" href="/register">Registre-se</a> <hr /> <label for="username"> Nome: <input name="username" type="text" /> </label> <label for="password"> Senha: <input name="password" type="password" /> </label> <label for="login"> <input name="login" type="submit" value="Login" /> </label> <hr /> <label for="sendpassword"> <a href="/profile?mode=sendpassword">Esqueci minha senha</a> </label> <label for="autologin"> <input name="autologin" id="autologin" tabindex="4" checked="checked" class="radio" type="checkbox" /> Conexão automática </label> </div> <a id="copyrights" href="www.forumeiros.com">Página hospedada na </a><a href="https://www.forumeiros.com" target="_blank">forumeiros.com</a> </form>

Este é o código que utilizo, gostaria que as seguintes imagens fossem utilizadas de fundo.

Spoiler:

Desde já agradeço

por Kyo Panda 24.07.17 17:41

Troque por esse:

Código:: <!DOCTYPE html> <html> <head> <title>Painel de login</title> <meta charset="utf-8" /> <style type="text/css"> @font-face { font-family: 'Sigmar One'; font-style: normal; font-weight: 400; src: local('Sigmar One'), local('SigmarOne'), url(http://themes.googleusercontent.com/static/fonts/sigmarone/v4/aRAZJs6CY7SV6eSg6Wx4jxsxEYwM7FgeyaSgU71cLG0.woff) format('woff'); } body { margin: 0; font: 14px Lucida sans; background: #333 url('http://perfectworld.uol.com.br/database/midia/wallpaper/larger07.jpg') no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #fff; } a, a:active, a:focus { text-decoration: none; color: #fafafa; } #logo { font: 30px 'Sigmar One'; text-align: center; padding: 0; margin: 5em 0 0; text-shadow: rgba(0,0,0,1) 0 0 5px; } form { margin: 0 auto; max-width: 50%; } #wrap { width: 100%; background: rgba(255,255,255,.3); border-radius: 5px; text-shadow: rgba(0,0,0,.5) 1px 1px 0; box-shadow: rgba(0,0,0,.2) 0 0 3px; text-align: center; padding: 3em 1em; } hr { margin: 1em; border: 0; border-top: 1px rgba(0,0,0,.2) solid; border-bottom: 1px rgba(255,255,255,.2) solid; } #register { background: url('http://imgur.com/EK2ZA9X.png') repeat-x scroll 0px 0px #8FBE5F; box-shadow: 0px 1px 0px 0px #ADD08B inset, 0px 2px 3px rgba(0, 0, 0, 0.2); text-shadow: 0px -1px 0px #474747; border: 1px solid #51842F; border-radius: 3px; color: #FFF; cursor: pointer; padding: .3em 5em; display: inline-block; margin: 0 2em 1em; } #copyrights { font-size: 13px; } </style> </head> <body> <form action="/login" method="post"> <p id="logo"> Perfect World Brasil </p> <div id="wrap"> <a id="register" href="/register">Registre-se</a> <hr /> <label for="username">Nome: <input name="username" type="text" /></label> <label for="password">Senha: <input name="password" type="password" /></label> <input name="login" type="submit" value="Login" /> <hr /> <a href="/profile?mode=sendpassword">Esqueci minha senha</a> <label for="autologin"> <input name="autologin" id="autologin" tabindex="4" checked="checked" class="radio" type="checkbox" /> Conexão automática </label> </div> <a id="copyrights" href="www.forumeiros.com" target="_blank"> Página hospedada na </a> <a href="https://www.forumeiros.com" target="_blank"> forumeiros.com </a> </form> <script> (function() { var bgs = [ 'http://perfectworld.uol.com.br/database/midia/wallpaper/larger01.jpg', 'http://perfectworld.uol.com.br/database/midia/wallpaper/larger02.jpg', 'http://perfectworld.uol.com.br/database/midia/wallpaper/larger03.jpg', 'http://perfectworld.uol.com.br/database/midia/wallpaper/larger04.jpg', 'http://perfectworld.uol.com.br/database/midia/wallpaper/larger05.jpg', 'http://perfectworld.uol.com.br/database/midia/wallpaper/larger06.jpg', 'http://perfectworld.uol.com.br/database/midia/wallpaper/larger07.jpg', 'http://perfectworld.uol.com.br/database/midia/wallpaper/larger09.jpg', 'http://perfectworld.uol.com.br/database/midia/wallpaper/larger10.jpg', 'http://perfectworld.uol.com.br/database/midia/wallpaper/larger12.jpg', 'http://perfectworld.uol.com.br/database/midia/wallpaper/larger13.jpg', 'http://perfectworld.uol.com.br/database/midia/wallpaper/larger14.jpg' ]; var bg = bgs[Math.floor(Math.random() * bgs.length)]; document.body.style.backgroundImage = 'url("' + bg + '")'; })(); </script> </body> </html>

por Sapinho 24.07.17 17:48

Resultou obrigado Kyo, estava usando um código semelhante, mas ele não rodova.

por Kyo Panda 24.07.17 17:51

Pode ter N motivos para tal, mas eu chuto que é pela falta de jQuery na página. Feliz

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.

Imagem aleatória em página html