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 - - Commentaires [4] - Permalien [#]
Tags : , , , , , ,



Commentaires :

    superbe

    j'aime beaucoup
    bonne journée

    Posté par michèle, 15 décembre 2009 à 12:19 | | Répondre
  • Le dernier...

    petit conseil est judicieux !Plus facile que de trouver de la chaleur en hiver.
    Niz
    jackie

    Posté par Jackie, 15 décembre 2009 à 12:40 | | Répondre
  • T.Bien pour ceux qui n'ont qu'une colonne ! ai-je bien compris ? Ton cerveau ne se repose-t-il jamais ? Bonne journée, amitiés Chantal

    Posté par Aziyadé, 15 décembre 2009 à 15:12 | | Répondre
  • Pour plusieurs colonnes !

    La zone de couleur unie devant recevoir le texte doit faire la largeur du "container". Le "container" regroupant la zone des articles et celles des menus latéraux. Cette technique est par conséquent applicable quel que soit le nombre de colonnes !

    Posté par Michal53, 18 décembre 2009 à 11:21 | | Répondre
Nouveau commentaire