Utiliser une photo en arrière-plan de l’entête

Vous souhaitez afficher une image ou une photo en arrière-plan de l’entête. N’oubliez pas les visiteurs sur smartphone ! Vous trouverez ici une solution pour bien dimensionner votre image afin qu’elle s’adapte à tous les écrans.

En utilisant SPIPr-Dane, et sur le web en général, les dimensions de l’entête des sites varient considérablement en fonction du terminal utilisé (écran pc, tablette, smartphone, etc), passant de 1170px en largeur [1] et 250px en hauteur pour un écran pc, à parfois 320px en largeur et 550px en hauteur pour un écran smartphone (Galaxy Note 3).

L’idée est d’utiliser une image suffisamment dimensionnée pour satisfaire à tous les écrans. Ici, nous allons utiliser une photo de 1200 x 550 pixels, ayant son centre d’intérêt en son centre.

Nous choisirons ensuite comme valeurs pour les propriétés de l’image d’arrière-plan :

  • Position : center center. Le centre d’intérêt correspondant au centre de l’image, il restera visible quelque soit le terminal utilisé.
  • Dimension : auto auto. L’image sera affichée à sa taille réelle.

Si le centre d’intérêt se situe ailleurs qu’au centre de l’image, la technique est moins simple. Avec un centre d’intérêt situé dans un des quatre coins de l’image, il faut utiliser la propriété Position avec les valeurs top, right, bottom et left. En finalité, on pourra jouer avec neuf possibilités suivant la position du centre d’intérêt.

JPEG - 137.5 ko
Propriété background-position
Exemples de valeurs pour la propriété position d’une image d’arrière-plan en fonction du centre d’intérêt
JPEG - 73.9 ko
Marais de Carentan - Centre d’intérêt
Exemple de centre d’intérêt excentré

Pensez également au poids de l’image. Ici, l’image enregistrée au format JPG, avec une qualité (niveau de compression) de 50 a un poids de 130Ko. Le taux de compression maximal est fonction de la qualité de l’image ou de la photo, souvent plus près de 80 que de 50, il est donc préférable de tester et de choisir la qualité mini acceptable. Dans tous les cas, le poids de l’image d’arrière-plan ne devrait pas dépasser 500Ko

Notes

[1Avec SPIPr-Dane, la taille maxi de l’entête est de 1170 pixels

Poser une question ou s'exprimer

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom

Partager

Imprimer cette page (impression du contenu de la page)