Detalhes da questão

Endereço do fórum: brasilplayfreedom.forumeiro.com/forum
Versão do fórum: PunBB

Descrição

Eu gostaria de coloca esse efeito Customize header para que o usuário possa escolher a imagem de fundo que deseja.

Vi neste fórum: http://ipsfocus.net/4x/

Quando aperta na câmera, aparece as imagem, e quando aperta na imagem ela oculta.

https://imgur.com/a/CXFqv

Olá autor, esse fórum é IPB por isto possui algo como isto, não disse que não é possível fazer isto, pelo contrário é sim possível.

Mas, não ficará exatamente igual, mas deixo uma outra sugestão, veja esses tópicos:
https://ajuda.forumeiros.com/t22290-tutorial-logo-aleatorio
https://ajuda.forumeiros.com/t104934-tutorial-como-transformar-seu-banner-em-um-slide-show

Não deixe também de ver nossa Lista de tutoriais
Até mais.

Teria algo mais parecido com o da minha print?

Olá autor,

Infelizmente o mais próximo do que o senhor deseja já foi enviado por while em sua resposta (observe os links que o mesmo passou).

Lamento.
Até mais!

Teria alguma maneira de mudar a imagem de fundo, os links fornecido por ele, muda o banner.

Olá,

Leia estes tutoriais:
https://ajuda.forumeiros.com/t46962-tutorial-background-aleatorio
https://ajuda.forumeiros.com/t71069-tutorial-background-conforme-hora-do-dia
https://ajuda.forumeiros.com/t71210-tutorial-background-diferente-para-cada-membro

Até mais!

Bom dia, Creem. Utilizei o código desse tutorial: https://ajuda.forumeiros.com/t71069-tutorial-background-conforme-hora-do-dia

Porém só mudei os links das imagens dele, veja:

Código:

jQuery(function() {
         
          //ZONA EDITABLE------------------------------------------------------------
         
          var selector_css = "body";
          var imagen_se_repite = true; 
         
          var horario_inicio = new Array();
          horario_inicio["mañana"] = 5; 
          horario_inicio["tarde"] = 12;
          horario_inicio["noche"]= 21;     
         
          var imagenes = new Array();
          imagenes["mañana"] = "http://imgur.com/5PFdmuq";
          imagenes["tarde"] = "http://imgur.com/rMDLXTP";
          imagenes["noche"] = "http://imgur.com/eK6PmNy.jpg";
          //FIN ZONA EDITABLE----------------------------------------------------------
         
         
          var horaActual = (new Date()).getHours();
          var imagen = "";
          if(horaActual >= horario_inicio["mañana"] && horaActual < horario_inicio["tarde"]){
              imagen = imagenes["mañana"];
          }else if(horaActual >= horario_inicio["tarde"] && horaActual < horario_inicio["noche"]){
              imagen = imagenes["tarde"];
          }else if(horaActual >= horario_inicio["noche"] || horaActual < horario_inicio["mañana"]){
              imagen = imagenes["noche"];
          }
         
          if(imagen_se_repite){
              jQuery(selector_css).css("background", "url(" + imagen + ") repeat");
          }else{
              jQuery(selector_css).css({"background-image":"url(" + imagen + ")", "background-repeat":"no-repeat", "background-size":"cover"});
          }
    });

Só que não deu nenhum resultado, até pensei que fosse pelo código CSS que uso para a imagem de fundo, mais não é, retirei ele e causou um bug na imagem de fundo, veja:

https://imgur.com/a/9FvAL

O código que utilizo para mudar a imagem de fundo, é este:

Código:

/*IMAGEM DE FUNDO*/
.layout_IE{
background: url(http://i.imgur.com/21IbdOD.jpg)!important;
background-repeat: no-repeat!important;
background-size: cover!important;
background

E para ajustar a posição da imagem é esse:

Código:

/*Ajuste tela de fundo*/
body > footer{position:relative!important;top:9px!important;}
header { width: auto !important; }
.container_IE {
    width: auto !important;
    min-width: auto !important;
}
body { overflow-x: hidden; }

Oque pode ser?

Olá, troque seu css por este:

Código:

/*IMAGEM DE FUNDO*/
.layout_IE{
background-repeat: no-repeat!important;
background-size: cover!important;
background-size:100%!important;
background-size: cover!important;}

E troque seu js por este:

Código:

        jQuery(function() {
             
              //ZONA EDITABLE------------------------------------------------------------
             
              var selector_css = "body";
              var imagen_se_repite = true; 
             
              var horario_inicio = new Array();
              horario_inicio["mañana"] = 5; 
              horario_inicio["tarde"] = 12;
              horario_inicio["noche"]= 21;     
             
              var imagenes = new Array();
              imagenes["mañana"] = "http://i.imgur.com/5PFdmuq.jpg";
              imagenes["tarde"] = "http://i.imgur.com/rMDLXTP.jpg";
              imagenes["noche"] = "http://imgur.com/eK6PmNy.jpg";
              //FIN ZONA EDITABLE----------------------------------------------------------
             
             
              var horaActual = (new Date()).getHours();
              var imagen = "";
              if(horaActual >= horario_inicio["mañana"] && horaActual < horario_inicio["tarde"]){
                  imagen = imagenes["mañana"];
              }else if(horaActual >= horario_inicio["tarde"] && horaActual < horario_inicio["noche"]){
                  imagen = imagenes["tarde"];
              }else if(horaActual >= horario_inicio["noche"] || horaActual < horario_inicio["mañana"]){
                  imagen = imagenes["noche"];
              }
             
              if(imagen_se_repite){
                  jQuery(selector_css).css("background", "url(" + imagen + ") repeat");
              }else{
                  jQuery(selector_css).css({"background-image":"url(" + imagen + ")", "background-repeat":"no-repeat", "background-size":"cover", "background-position":"fixed"});
              }
        });

Até mais.

Resultou, porém ficou aparecendo mais de 3 imagem da mesma, eu gostaria que ficasse ajustada somente uma em toda a pagina.

Ah sim, adicione esse código em sua folha de estilo css:

Código:

body {background-size:100%!important;background-size: cover!important;}

Até mais.

Resolvido, obrigado.