Iframe chevauchant image de fond

par Ganthille Ven 5 Mai 2023 - 4:54

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : pas utile de le donner

Description du problème

Bonjour,

Je me sens très boulet car je suis certaine que la solution est claire mais décidément je ne trouve pas.

Je désire installer un iframe (une animation en CSS hébergée sur une des pages html de mon forum) par-dessus l'image de fond de mon forum.

Dans quel template et vers quelle ligne je dois insérer mon iframe pour qu'il s'étende sur tout le fond de mon forum?

Si des codes sont requis, m'indiquer lesquels svp et je vous les fournirai sous hide.

Merci beaucoup,

par **Toryudo** Dim 7 Mai 2023 - 8:44

Bonjour !

Alors un fond en iframe, je pense que ce ne sera pas idéal, parce qu'un iframe met un peu de temps à charger par rapport à tout le reste de la page... donc visuellement, ce ne sera pas très propre. Je préconiserais plutôt de recopier/adapter ce fond animé sur le Template overall_header.

Mais si vous voulez restez sur l'iframe pour le côté "facile à maintenir et à changer", on peut quand même faire quelque chose. J'ai testé avec un iframe simple qui ne contient qu'un fond vert, ce devrait être la même solution pour le vôtre. Vous allez aller dans le Template overall_header (par ici pour le tuto des Templates https://forum.forumactif.com/t239497-modifier-les-templates-de-votre-forum si besoin), et vous allez copier cette balise iframe :

Code:: <iframe id="iframeBack" src="adresse_de_votre_iframe" width="100%" height="100%"></iframe>

Et vous allez la coller juste après "<body id="phpbb">". Le résultat ressemble à ceci :

Code:: <body id="phpbb"> <iframe id="iframeBack" src="adresse_de_votre_iframe" width="100%" height="100%"></iframe>

Remplacez bien sûr "adresse_de_votre_iframe" par l'adresse de votre iframe.
Ensuite, un peu de CSS personnalisé pour faire en sorte que l'iframe soit fixe quand on fait défiler la page, et en background :

Code:: #iframeBack { position: fixed; top: 0; left: 0; z-index: -1; border: none; }

Et si tout va bien, voilà le fond modifié avec votre iframe !

par Ganthille Dim 7 Mai 2023 - 17:55

Toryudo a écrit:Bonjour !

Alors un fond en iframe, je pense que ce ne sera pas idéal, parce qu'un iframe met un peu de temps à charger par rapport à tout le reste de la page... donc visuellement, ce ne sera pas très propre. Je préconiserais plutôt de recopier/adapter ce fond animé sur le Template overall_header.

Je sais, j'ai tenté plusieurs options mais vu la nature du codage je ne pouvais pas l'intégrer au template Crying or Very sad

CELA DIT, vos conseils fonctionnent à merveille, et du premier coup ! Un million de merci, j'en étais à m'arracher les cheveux pour trouver où placer le iframe sans que cela déforme ou décale tout le reste.

Encore merci Very Happy

Iframe chevauchant image de fond