Header de fond qui s'adapte à la résolution de l'écran

[Illiana]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous

Tout d'abord, merci d'être ici, c'est que mon problème vous intéresse et que vous avez sans doute la solution.

Le forum pour lequel je tente de mettre en place un header de fond est un forum sous version phpBB3 ET je vous avoue qu'en fait je ne maîtrise pas cette version, peut-être pour ça que j'ai fini par péter un câble sur le code et que je me tourne vers vous X)

J'ai regardé un peu partout sur FA mais impossible de trouver un turoriel qui pourrait m'aider, c'est donc pour ça que je viens vers vous et... sans code, je l'avoue, j'ai tout supprimé (honte à moi je sais...).

J'aimerai pouvoir adapter un header de fond aux différentes résolutions d'écran MAIS sans avoir à devoir faire 40 headers.
J'ai un code qui fonctionne très bien pour les headers normaux (qui me permet d'avoir une image en 800px de largeur alors qu'elle en fait au moins 1500) mais impossible d'en trouver un correct pour ce fameux header de fond.

Le lien du forum est caché parce qu'il s'agit d'un forum test et donc vu que je n'ai aucun visuel à vous fournir ce n'est pas grave si vous ne l'avez pas (vu que pour rappel j'ai tout viré).

Si vous avez un lien tutoriel vers lequel me renvoyer, ou si vous utilisez un code qui fonctionne (sous phpBB3), n'hésitez pas !

Désolée si mon soucis n'est pas posté au bon endroit ou si un autre le rejoint, j'ai pourtant bien cherché et rien trouvé qui y ressemblait.
Et merci d'avance à ceux qui pourront m'aider !

Bonne journée

[Neptunia]

Bonjour ^^

J'ai regardé un peu partout sur FA mais impossible de trouver un turoriel qui pourrait m'aider, c'est donc pour ça que je viens vers vous et... sans code, je l'avoue, j'ai tout supprimé (honte à moi je sais...).

Un peu partout sauf dans l'un des deux endroits à regarder en priorité !

Listing des Trucs & Astuces

[Illiana]

Bonjour Neptunia

J'ai épluché ce fichier en long, en large et en travers.
Il n'y a rien qui me permet de mettre un header de fond qui s'adapte à la résolution de l'écran J'ai d'ailleurs essayé plusieurs des tutoriels qui pourraient m'aider mais ce n'est pas ce que je veux.

[*Splash*]

Bonjour Neptunia

J'ai épluché ce fichier en long, en large et en travers.
Il n'y a rien qui me permet de mettre un header de fond qui s'adapte à la résolution de l'écran

Mais oui bien évidement, on va dire que tu es passé à côté de ce tuto > Clique

[Neptunia]

Le résultat parle de lui-même (avec le tuto du listing évoqué plus haut)



Un logo transparent de 800*250 -> https://www.badwholf.uk/rsc/img/Interface/f800x250.png

Une image de fond d'en-tête de 2560*1600 -> https://www.badwholf.uk/rsc/img/London.jpg

Et on peut redimensionner la fenêtre ou visiter la page depuis un autre dispositif. L'image s'adaptera toujours à son conteneur.

[Illiana]

*Splash*
Déjà bonjour c'est la moindre des choses.
Et non je ne suis pas passée à côté de ce tuto. Tout simplement que le rendu ne fonctionnait pas. Je viens de réessayer d'un autre ordinateur et ça fonctionne. La prochaine fois on cherche à savoir avant de clasher les gens, ça s'appelle la communication.
Merci.

Neptunia
Du coup j'ai réussi à trouver le soucis. Merci pour le header transparent.
Est-ce qu'il existe une manière de faire sans logo transparent (descendre le forum par un margin) ou il faut forcément ce logo transparent ?
Je me demande si, en mettant un logo transparent fixe, le header de fond sera identique sur tous les ordinateurs. En gros, est-ce que le forum commencera bien juste en dessous du header ou selon les résolutions d'écran il sera sur le header ou plusieurs pixels en dessous.
L'utilisation de la balise img#i_logo peut-elle être une solution pour que le forum (barre de navigation) soit bien placée juste en dessous du header ?
Et autre question : il me reste des coins blancs autour de ce logo invisible. Impossible de trouver la couleur de contour qu'il faut que j'enlève (si c'est bien un contour).

Désolée d'être cassante dans cette réponse ce n'est pas dans mes habitudes mais apprenez à parler aux gens sérieusement. Déjà la première réponse m'a grandement refroidie.
"Un peu partout sauf dans l'un des deux endroits à regarder en priorité !". Non. Un "Est-ce que tu es sûre d'avoir regarder partout ? Ce tuto est la solution, a moins que tu es eu un problème avec ou que tu ne saches pas l'installer?".
Là on voit déjà que vous vous intéressez un peu au problème, pas que vous vous foutez de la gueule du monde.
Encore une fois c'est pas dans mes habitudes d'être méchante mais... faites attention aux mots que vous employez. On est pas tous doués en codage, on est humain et parfois fatigué, je suis sûre que ça vous ait déjà arrivé de ne pas voir quelque chose ou que votre essai ne fonctionne pas au départ et fonctionne ensuite.

[Neptunia]

Je vais d'abord répondre sur la forme :

Quand quelqu'un se pointe en affirmant avoir cherché un peu partout, je trouve déjà suspect (par expérience)
Je connaissais l'existence de ce tuto, donc je savais que vous n'aviez pas regardé ou du moins pas assez attentivement le listing des questions fréquentes et surtout celui des trucs et astuces.

Maintenant je comprends aisément que si un tuto n'existe pas, on ne parvienne pas à trouver quelque chose dans l'entraide soit parce qu'on n'a pas les bons mots-clé, soit parce qu'ils sont tellement courants qu'on va avoir 300 résultats sans garantie d'y trouver notre bonheur.
Mais ça ne s'arrête pas là ! Pour s'assurer que la personne a vraiment cherché on peut faire un contrôle rapide avec ses propres mots.

Test que je viens de faire à l'instant :
Je prends le titre de votre sujet :
-> Header de fond qui s'adapte à la résolution de l'écran
Je vire tout ce qui fait moins de 4 caractères (la recherche ne fonctionne pas sur les mots de 3 lettres ou moins)
-> Header fond adapte résolution écran
Je supprime fond et écran qui sont trop communs pour donner quelque chose d'utile.
-> Header adapte résolution
Je tape un par un dans la recherche les mots restants en commençant par header
-> Recherche interne - Header -> 209 résultats
Rien que sur la première page j'ai au minimum deux sujets pertinents (fournissant le code ou redirigeant sur le tuto)
Et on peut continuer ! adapte ne donne que 23 résultats mais la plupart sont pertinents. Résolution donne 74 résultats dont plusieurs pertinents dès la première page.

Moralité : quel que soit les mots que vous utilisiez, vous deviez trouver quelque chose ! Ca donne quand même à réfléchir d'autant que j'avais déduit la faiblesse de votre recherche avant même de la mettre à l'épreuve.

Ensuite vous vous vantez d'avoir tout viré, sans même nous fournir un lien exemple de ce que vous voulez obtenir, ni schéma ni même un seul lien vers ce que vous avez tenté.
Enfin vous dites ceci :

Si vous avez un lien tutoriel vers lequel me renvoyer, [...], n'hésitez pas !

Ce que je traduis par :
- J'ai pas cherché et j'ai pas envie de perdre mon temps avec ça ! Mais je vais affirmer le contraire (de toute façon ici sont trop ***** pour savoir si c'est vrai ou pas)
- Comme ma non-recherche a donné de non-résultats pas besoin de fournir de code ne fonctionnant pas. Ca serait trop bête qu'un code fourni au hasard se mette précisément à fonctionner.
- Pour finir, je devrais bien pouvoir trouver un pigeon pour faire la recherche à ma place et me filer le lien du tuto sans que je me fasse c**** à le chercher moi-même.

Partant de là il était exclu pour moi de faire ce genre de réponse :

Est-ce que tu es sûre d'avoir regarder partout ? Ce tuto est la solution, a moins que tu es eu un problème avec ou que tu ne saches pas l'installer?".

J'ai juste mis volontairement sur la voie pour que vous fassiez ensuite un minimum d'effort. Je sais que ça peut m'arriver involontairement d'être blessante, mais ici c'était tout sauf involontaire.

---

Maintenant la réponse sur le fond.

Oui on peut éviter le logo transparent en passant par le css mais le logo sera alors l'image vide de 1 pixel de côté. Pas évident de cliquer dessus pour revenir sur l'index !
En outre le logo est léger, moins de 1 ko, 894 octets pour être précise ! Et avec une image non optimisée. Je viens de le faire à l'instant et j'arrive à 302 octets.

L'utilisation de la balise img#i_logo peut-elle être une solution pour que le forum (barre de navigation) soit bien placée juste en dessous du header ?

Oui ... à condition de repasser en phpBB2.

Sous phpBB3 le sélecteur équivalent est #logo img


Pour les coins blancs :
Le template de base contient ceci  :

Code:

<div class="headerbar">
 <div class="inner"><span class="corners-top"><span></span></span>

 <div id="logo-desc">
 <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
 <!-- BEGIN switch_h1 -->
 <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
 <!-- END switch_h1 -->
 <!-- BEGIN switch_desc -->
 <p>{switch_desc.SITE_DESCRIPTION}</p>
 <!-- END switch_desc -->
 </div>

 <span class="corners-bottom"><span></span></span></div>
 </div>

Ce sont ces deux blocs qui génèrent les angles blancs :

Code:

<span class="corners-top"><span></span></span>

Code:

<span class="corners-bottom"><span></span></span>

non pas avec une couleur de fond mais avec deux images :
- https://2img.net/i/fa/prosilver/corners_left.gif
- https://2img.net/i/fa/prosilver/corners_right.gif

Je n'ai pas testé, mais je pense qu'en supprimant ces deux doubles span, le problème devrait disparaître.

---

Pour la petite histoire, si j'ai mis un logo transparent c'est parce que l'image du thème recouvrait presque toute la zone du header. Le logo transparent permettait de mieux mettre en évidence mon image d'en-tête.

D'ailleurs ce que vous avez n'est pas un "header de fond" mais l'image de fond du forum puisqu'elle est appliquée au body. Alors que moi il s'agit de l'image de fond de l'en-tête ce qu'on peut traduire par fond de header (et non header de fond). Et ça s'applique au .headerbar

Et d'ailleurs je viens de voir juste au-dessus de cette image sur le PA les 4 images suivantes :
- Coins arrondis gauche :
- Coins arrondis droit :
- Coins arrondis gauche sur fond coloré :
- Coins arrondis droit sur fond coloré :

Voilà qui devrait régler le problème des angles blancs.

[Illiana]

Je me doute que par expérience certains ne cherchent pas mais si la prochaine fois je dois prendre en capture d'écran mon historique de recherche pour prouver que j'ai chercher partout je le ferais. Y compris sur d'autres forums et dans leurs archives de problèmes avec les headers de fond pour comprendre ce qui ne fonctionnait pas. J'ai testé des tas de codes, dont des codes qui correspondaient à celui donné sur FA mais avec des suppléments (par exemple le background qui ne se répète pas ou la couleur directement intégrée dans le CSS) et donc au bout d'un moment j'ai tout effacé parce que ça ne fonctionnait pas (c'est comme ça, je suis comme ça, quand j'y arrive pas je fini par tout jeter).
Mais dans tous les cas ya des manières de le dire, notamment la manière de l'autre personne qui en plus se permet de venir sans un bonjour Ta réponse en soit me convenait, c'est juste l'autre personne qui m'a mit un peu hors de moi en ne cherchant pas à savoir ce qui m'amenait ici.
D'ailleurs maintenant quand je vois header de fond / image de fond je comprend pourquoi on ne s'est pas comprit de base, parce que c'est pas forcément le rendu que je cherche.

Et merci je sais faire une recherche...



La suppression des double span a fonctionné, merci beaucoup.

Du coup... Je sais que sur les forums graphismes et tout ça on parle de header simple et header de fond. En gros c'est pas un header mais une image (petit abus de langage donc ?) ?
Et dans ce cas, si on veut une autre image de fond pour le forum (un fond répétitif), comment faire pour avoir le header qui prend tout l'espace (sans que le forum soit à 100% lui aussi) et avoir l'image de fond (enfin pour l'image de fond le tuto correspond cette fois puisque c'est pas un header).

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Illiana]

Bonjour

Le soucis est toujours d'actualité, il n'est pas réglé.

Désolée de ne pas avoir up !

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.