Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

CSS 2
Les pages

  Gestion du fond de page

fonction  principe  la methode elle-meme  demonstration  telechargement de la methode  Compatibilite du script... a partir de : 

  Fonction
En HTML, une image en fond de page se répète obligatoirement sur toute la page.
Avec les feuilles de style, il est possible de contrôler la répétition, de 'nulle' à 'totale' en passant par 'horizontale ou verticale'. De plus, Internet Explorer permet de placer précisément l'image avec ou sans sa répétition.
  Principe
Après avoir spécifié une image de fond de page par l'attribut 'background-image', vous pouvez choisir :
  1. La répétition avec 'background-repeat' :
    • background-repeat: no-repeat : aucune répétition de l'image,
    • background-repeat: repeat-x : répétition de l'image uniquement à l'horizontale,
    • background-repeat: repeat-y : répétition de l'image uniquement à la verticale,
    • background-repeat: repeat : répétition de l'image horizontale et verticale.

  2. Le positionnement avec 'background-position' (non interprété par Netscape) :
    • background-position: top : l'image sera calée en haut de la page,
    • background-position: center : l'image sera calée au centre de la page,
    • background-position: bottom : l'image sera calée en bas de la page,
    • background-position: left : l'image sera calée à gauche de la page,
    • background-position: right : l'image sera calée à droite de la page,
    • background-position: 25% 100% : l'image sera calée à 25% du bord gauche et à 100% du haut (tout en bas) de la page,
    • background-position: 20px 150px : l'image sera calée à 20 pixels du bord gauche et à 150 pixels du haut de la page,
    • background-position: left center : l'image sera calée à gauche de la page, centrée verticalement.

  3. Le mouvement avec 'background-attachment' (non interprété par Netscape) :
Les valeurs en gras signale le comportement par défaut des navigateurs si l'attribut n'est pas spécifié.
  La méthode
dans la partie <head>
<style>
Exemple 1
body.1 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: center; }

Exemple 2
body.2 { background-color: #FFFF00; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: center; }

Exemple 3
body.3 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: top; }

Exemple 4
body.4 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: bottom; }

Exemple 5
body.5 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: repeat-x; background-position: center; }

Exemple 6
body.6 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: repeat-x; background-position: left; }

Exemple 7
body.7 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: repeat-y; background-position: center; }

Exemple 8
body.8 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: repeat-y; background-position: top; }

Exemple 9
body.9 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: 25% 75%; }

Exemple 10
body.10 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: 100% 100%; }

Exemple 11
body.11 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: 20px 150px; }

Exemple 12
body.12 { background-color: #FFFFFF; background-image: url('images/logo.gif'); background-repeat: no-repeat; background-position: top left; background-attachment: fixed; }
</style>
  Démonstration

Voir la démonstration
  Téléchargement
Cette feuille de style est disponible en deux versions :
  • le style est appliqué localement, dans la balise style de la page),
  • le style dans une feuille de style externe, commune à toutes les pages (fichier .css).

    L'intérêt d'une feuille de style est de pouvoir partager le style entre plusieurs liens de la page.
    		•
    Style local :
    page_background.zip
    10 Ko    		 telechargez le style telechargez le style
    Feuille de style :
    page_background2.zip
    10 Ko
    Recherche
    		aide sur la recherche
    DHTML
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter