15 décembre 2009

Un fond fixe

Avec une image de fond mobile, le défilement vers le bas d'une page provoque le déplacement de l'ensemble de la page.
Avec une image de fond fixe, seul le contenu textuel défile.

fall
un exemple de fond fixe, le modèle fall

En utilisant cette technique, on peut facilement personnaliser son blog.

Il suffit de créer une image en respectant trois impératifs :

1- la surface centrale de l'image doit être de couleur unie
2- et avoir la largeur du "container" ;
3- l'image doit avoir des dimensions maximales, de façon à satisfaire tous les visiteurs du blog, en particulier ceux dont l'écran a une résolution élevée (1920 x 1200).

C'est la propriété "background-attachment" qui permet d'afficher une image mobile (valeur "scroll", qui est la valeur par défaut) ou fixe (valeur "fixed"). En écriture raccourcie, on aura donc ceci :

body {
          background: #000000 url(URL de l'image) top center no-repeat fixed;
}

Exemple d'une image de fond :

paper2b

Nota :

Une image de ces dimensions a tendance à être lourde (son poids étant mesuré en Ko), il y aura donc un petit temps d'attente lors de son premier chargement au visionnage de la page. D'autre part, il faudra trouver un lieu de stockage sur le Net qui en préserve les dimensions (sur Canalblog utiliser "l'insertion de fichier" au lieu de "l'insertion d'image"). Mais on pourra sensiblement améliorer les choses au moment de l'enregistrement de l'image en l'allégeant au maximum (options d'enregistrement du logiciel de graphisme utilisé).

Posté par Michal53 à 12:11 - - Permalien [#]
Tags : , , , , , ,