Adapter le header a toutes les résolutions d'écrans.

[Invité]

Bonjour,

Etant donné que mon header est très grand, certains membres ne voient pas en entier. Ce n'est pourtant pas mon cas. Si je prends un header plus petit, il ne fait pas la taille complète de l'écran.

J'ai entendu parler d'un code permettant d'adapter le header à toutes les résolutions d'écran. Quelqu'un pourrait il me le communiquer s'il vous plait ?

Merci.

[Rezzert]

Bonsoir Gwelallyn,
je pense que tu cherches ce code là : https://forum.forumactif.com/t286701-image-de-fond-changeante-selon-la-resolution-du-visiteur

Cordialement,
Rezzert.

[Invité]

Bonsoir Gwelallyn,
je pense que tu cherches ce code là : https://forum.forumactif.com/t286701-image-de-fond-changeante-selon-la-resolution-du-visiteur

Cordialement,
Rezzert.

Bonjour,

Le problème avec ce code là c'est qu'il faut plusieurs images et je n'en ai qu'une qui fait 1500px de largeur.

[Rezzert]

Il vous suffit juste de redimmensionner votre image pour chaque dimmension.

[Invité]

Ok, j'essaierai dans l'après-midi.
Je vous tiendrais au courant.

[Manumanu]

Le problème de cette solution, c'est qu'il faut prévoir une image par largeur d'écran possible, ce qui en fait une tripotée ; c'est donc plutôt contraignant.

Tu peux simplement ajouter à ton header la propriété background-size, si tu sais comment faire (sinon, poste le lien vers le forum, je te dirais)
Un exemple :

Code:

body { background-size: cover }

C'est à toi de voir quelle solution tu préfères.

[Invité]

Le problème de cette solution, c'est qu'il faut prévoir une image par largeur d'écran possible, ce qui en fait une tripotée ; c'est donc plutôt contraignant.

Tu peux simplement ajouter à ton header la propriété background-size avec la valeur cover, si tu sais comment faire (sinon, poste le lien vers le forum, je te dirais)
Un exemple :

Code:

body { background-size: cover }

C'est à toi de voir quelle solution tu préfères.

Coucou,
Alors c'est plusieurs forums, dont un où le design est en préparation donc il n'est que sur un forum test pour l'instant.

Les voici :
http://volate-ascendere.harrypotterrpg.fr/
http://artsport.forumgratuit.org/
http://test-gwelallyn.forumgratuit.org/

Merci

[Manumanu]

Mmh, c'est un poil plus compliqué que ce que j'avais imaginé, avec cette configuration.

Bon, alors voilà :

Code:

@media screen and (max-width:1995px)
{
   body { background-size: 100% auto }
}

Dans chaque cas, remplace la valeur de max-width par la largeur originale de ton image, et soustrait environs 5 pixel (histoire d'avoir une marge).


Le soucis, dans les deux cas de figure (solution javascript ou CSS), c'est que si on réduit la largeur de la bannière, il faut réduire proportionnellement la hauteur (ce qui est fait avec background-size), pour ne pas déformer l'image. Mais la distance entre la bannière et le haut du forum ne changera pas...

Il n'y a pas de réelle solution optimale, si ce n'est de prévoir des header qui ne véhiculent pas d'informations (une simple décoration), ou qui les véhiculent bien au centre sur une largeur maximale de 960px en moyenne.
Ou bien, utilisant cette technique, de faire des header de hauteur égale, mais en resserrant les éléments vers le centre à chaque fois, et de les changer en fonction de la taille, avec une méthode ou une autre.

[Invité]

Merci
J'essaie ça, et je demande à ma co-admin qui elle le voit mal à sa résolution si ça fonctionne.

[Manumanu]

Ok, j'attends de voir.

[Invité]

Visiblement ça fonctionne
Merci beaucoup.

[Manumanu]

Je t'en prie.