Image en tête aléatoire ModernBB

[adrien_69]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.passionlachasse.com

Description du problème

Bonjour,

J'utilise se code là via le CSS pour l'image de fond de mon forum test :

http://forumtestplc.forumactif.com/forum

Code:

.headerbar {background-color:#6B6834; background-image: url(https://i62.servimg.com/u/f62/09/00/66/99/2017-011.jpg); background-position: center center;background-repeat: no-repeat;background-size: cover;height: 310px;margin: 0;overflow: hidden;padding: 0;position: relative;
}


Et j'aimerais pourvoir afficher 2 ou 3 images aléatoirement à la place d'une seule image de fond qui soit toujours la même ? Est ce que c'est possible ?

Merci.

Cordialement, Adrien.

[Fallen Leaves]

Bonsoir

En faisant une recherche, j'ai trouvé ceci : https://forum.forumactif.com/t275674-banniere-aleatoire-pour-headers-en-fond-de-page
En espérant que le script fonctionne encore (surtout en ModernBB)

[adrien_69]

Bonsoir,

Merci de ta réponse, mais malheureusement non, ça ne fonctionne pas pour la version modernBB !

Cordialement, Adrien.

[Fallen Leaves]

Ah désolée.... Je ne pourrais pas t'être d'une grande aide, je ne code que sur du phpbb2. J'espère que quelqu'un pourra t'aider

[adrien_69]

Merci. Par contre ton code fonctionne, sauf que ça n'affiche pas les images dans l'en tête. Il n'y aurait pas moyen de placer le script, dans un Template afin de faire afficher les images dans l'en tête ?

[Fallen Leaves]

sauf que ça n'affiche pas les images dans l'en tête.

C'est à dire ? Où les images s'affichent-elles ?

[adrien_69]

En dessous de l'entête au niveau de la barre de navigation !

[Fallen Leaves]

Je ne vois pas le résultat sur ton forum de test, pas évident de pouvoir te donner un coup de main dans ces conditions là :/

[adrien_69]

Je viens de remettre le code en place pour te faire voir, désolé...

[Fallen Leaves]

Alors en fait ça fonctionne Dans ton css, recherche la ligne concernant headerbar :

Code:

.headerbar {
    background-color: #1D262C;
    background-image: url(https://2img.net/i/fa/empty.gif);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

Supprime la ligne "background-color: #1D262C;" et enregistre

[adrien_69]

Je n'ai pas ce code dans mon CSS ?

[adrien_69]

Je viens de le supprimé, j'ai bien ce code, j'ai supprimé la ligne en question... Voilà donc mon code :

Code:

/*en tete*/
.headerbar {
    background-image: url(https://2img.net/i/fa/empty.gif);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 320px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

Et les images sont toujours en dessous ?

[Fallen Leaves]

Alors rajoutes-y :

Code:

background-color: transparent;

[adrien_69]

Ca fonctionne, sauf que ça me répète l'image plusieurs fois malgré le no-repeat, un idée ?

Merci de ton aide en tout cas !

[adrien_69]

Finalement j'ai fait autrement... Merci pour tout !

Je passe le sujet en résolu, et je mets mes codes au cas où que ça peut aider !

Dans le CSS :

Code:

/*banniere en tete*/
#page-header.entete1 { background-image: url('lien_image_1.jpg'); }
#page-header.entete2 { background-image: url('lien_image_2.jpg'); }
#page-header.entete3 { background-image: url('lien_image_3.jpg'); }


Dans les java scrpit, cocher toutes les pages :

Code:

$(document).ready(function(){
    var classes = ["image1", "image2", "image3"];
 
    $("#page-header").each(function(){
        $(this).addClass(classes[~~(Math.random()*classes.length)]);
    });
});

Amitiés, Adrien.