Fusionner : Bannière aléatoire + Arrière-plan extensible ( Et si possible créer un décalage )

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Fusionner : Bannière aléatoire + Arrière-plan extensible ( Et si possible créer un décalage )

Message par Mysticals le Sam 3 Jan 2015 - 21:08

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 03/01/2015
Lien du forum : http://www.teso-event.com/

Description du problème

Bonjour ! Je voudrais fusionner la java de bannière aléatoire ( http://forum.forumactif.com/t223082-banniere-aleatoire-ou-defilante )

Code:
$(function() {
        
var a = ["http://adresse_image_1", "http://adresse_image_2", "http://adresse_image_3"];
        
$("#pun-logo img,#i_logo,#logo img").attr("src", a[Math.floor(Math.random() * a.length)])
        
});

Avec un css de fond de page extensible :

Code:
body { margin:0;
padding:0;
background: url(http://adresse_image) no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;}

Pour pouvoir tout simplement avec un fond d'écran extensible, mais avec plusieurs images ( qui changerons donc à l’actualisation ).

J'ai essayer quelques bidouillages, mais rien ne s'affiche. Genre remplacer "#pun-logo img,#i_logo,#logo img" par "body" et retirer l'image du css, mais ça ne fonctionne pas. J'ai aussi tenter de m'inspirer d'un de mes ancien topic ( http://forum.forumactif.com/t348748-fusionner-les-scripts-fonds-aleatoires-adaptes-a-la-resolution ) en vain.

Help! Surprised

Ps : En plus, dans ce futur code ( si c'est réalisable ), je voudrais pouvoir imposer une marge en hauteur, pour que les images ne soient pas rogner par ma barre de navigation ( http://www.teso-event.com/ ), ce serais à l’occurrence 48px. J'avais essayer sur mon css de base d'ajouter une marge, mais j'imagine que c'est .body qui pose soucis, vu que c'est justement le référentiel, enfin, je crois...


Dernière édition par Mysticals le Sam 3 Jan 2015 - 23:05, édité 1 fois

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fusionner : Bannière aléatoire + Arrière-plan extensible ( Et si possible créer un décalage )

Message par [Nihil] le Sam 3 Jan 2015 - 21:21

Hello Smile

Sympa le design de ton forum Wink !

Si tu remplaces la ligne :
Code:
$("#pun-logo img,#i_logo,#logo img").attr("src", a[Math.floor(Math.random() * a.length)])

Par
Code:
$("body").attr("background-image", "url(" + a[Math.floor(Math.random() * a.length)] + ")");

Cela fonctionne-t-il comme tu le souhaites Smile ?

Pour l'histoire de la marge en hauteur je ne suis pas sûre d'avoir bien compris... Tu souhaites décaler l'image vers le bas (l'image de fond sur le body) ? C'est ça ?

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fusionner : Bannière aléatoire + Arrière-plan extensible ( Et si possible créer un décalage )

Message par Mysticals le Sam 3 Jan 2015 - 21:30

Woaw, c'est du rapide ! Merci, je vais tester ça.

EDIT : Ça ne fonctionne pas, le css est a modifier aussi, mais comment ?

Surrement


Code:
background: url(http://adresse_image) no-repeat center fixed;

A changer, mais je ne sais pas par quoi. Il faut renvoyer le contenu de url() sur le java je pense, ou pas, enfin bref...



Pour la marge : Oui, en faite, comme je perd 48 px de haut avec la barre de navigation fixe, mes images de fonds vont donc elles aussi perdre 48px. Ce sera des images de personnage, je voudrais leurs éviter la décapitation.

Tu pourrais me dire suffit d'ajouter 48px en haut des images, oui mais non, elles sont extensibles, donc les 48px se faussent celons les résolutions...

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fusionner : Bannière aléatoire + Arrière-plan extensible ( Et si possible créer un décalage )

Message par [Nihil] le Sam 3 Jan 2015 - 22:42

Hello,

Désolée, j'avais fait une modification quand j'avais testé dans la console... et j'ai oublié de la mettre dans mon message. Mr. Green

C'est .css et non pas .attr
Code:
$("body").css("background-image", "url(" + a[Math.floor(Math.random() * a.length)] + ")");

Pour ce qui est du positionnement de l'image, dans le CSS du background il y a ceci "center", cela veut dire que le placement horizontal et vertical se fait par rapport au centre de l'écran Wink
Tu voudrais que le haut de ton image soit en haut de l'écran c'est ça ?

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fusionner : Bannière aléatoire + Arrière-plan extensible ( Et si possible créer un décalage )

Message par Mysticals le Sam 3 Jan 2015 - 22:49

Oui, positionné par rapport au haut ( avec une marge si possible ), et centrer horizontalement.

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fusionner : Bannière aléatoire + Arrière-plan extensible ( Et si possible créer un décalage )

Message par [Nihil] le Sam 3 Jan 2015 - 23:00

Ensuite pour positionner le background il faut rajouter dans le CSS de body en modifiant 40px comme tu veux (c'est le décalage vertical):

Code:
background-position: 50% 40px;

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fusionner : Bannière aléatoire + Arrière-plan extensible ( Et si possible créer un décalage )

Message par Mysticals le Sam 3 Jan 2015 - 23:05

Que demande le peuple, tout est parfait !

Je te remercie énormément pour les codes et le temps accordé. Wink

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum