Imagem aleatória em página html

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Imagem aleatória em página html

Mensagem 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
Sapinho

Sapinho
Super Membro

Membro desde : 13/02/2010
Mensagens : 1043
Pontos : 1423

http://forum.academianinjakonoha.com/ https://www.facebook.com/brubsg10

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem aleatória em página html

Mensagem 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>

Feliz
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem aleatória em página html

Mensagem por Sapinho 24.07.17 17:48

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

Sapinho
Super Membro

Membro desde : 13/02/2010
Mensagens : 1043
Pontos : 1423

http://forum.academianinjakonoha.com/ https://www.facebook.com/brubsg10

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem aleatória em página html

Mensagem 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.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos