Developpez.com - Développement Web
X

Choisissez d'abord la catégorieensuite la rubrique :


Les propriétés d'arrière-plan : background

01/02/2003

Par giminik (Matthieu Petiot) (autres articles)
 

Cet article vous dévoilera les propriétés üvisuelles utilisables avec les éléments acceptant des couleurs ou images de fond.


1. background-color (CSS 1)
2. background-image (CSS 1)
3. background-repeat (CSS 1)
4. background-attachment (CSS 1)
5. background-position (CSS 1)
6. background (CSS 1)


1. background-color (CSS 1)


Liste des navigateurs compatibles

  • Internet Explorer 4 et supérieurs
  • Netscape 4 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété définit la couleur d'arrière plan d'un élèment. Sa valeur n'est pas héritée mais comme la valeur par défaut est le transparent, les arrière-plans des éléments imbriqués paraîtront de la même couleur que l'élément parent. Lisez l'article sur les couleurs valides.

Syntaxe et valeurs possibles
/* code hexadécimal #rrvvbb ou #rvb (rouge, vert, bleu) variant de 0 à F */ background-color : #76FA94 ; background-color : #3B4 ; /* correspond à #33BB44 */ /* nom de la couleur */ background-color : red ; /* rgb(x, y, z) : Couleur en mode RVB avec x, y et z variant de 0 à 255 */ background-color : rgb(123, 156, 34) ; /* rgb(x%, y%, z%) : Couleur en mode RVB avec x, y et z variant entre 0 et 100 */ background-color : rgb(34%, 15%, 12%) ; /* l'arrière-plan est défini comme transparent */ background-color : transparent ;
Visualisez un exemple.


2. background-image (CSS 1)


Liste des navigateurs compatibles

  • Internet Explorer 4 et supérieurs
  • Netscape 4 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété définit l'image d'arrière plan d'un élèment. Sa valeur n'est pas héritée mais comme la valeur par défaut est l'absence d'image, les arrière-plans des éléments imbriqués seront identiques à celui de l'élément parent. Si le chargement de l'image échoue, c'est la couleur de fond background-color qui sera visible, sinon l'image se superpose à cette couleur et est visible à travers les pixels transparents de l'image. Son adresse est indiquée par l'instruction url(), il suffit d'utiliser une adresse relative ou absloue.

Syntaxe et valeurs possibles
/* adresse relative */ background-image : url(mondossier/monimage.gif) ; /* adresse absolue */ background-image : url(http://www.monsite.com/mondossier/monimage.gif) ;
Visualisez un exemple.


3. background-repeat (CSS 1)


Liste des navigateurs compatibles

  • Internet Explorer 4 et supérieurs
  • Netscape 4 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété sert à définir la nécessité de répéter ou non l'image d'arrière plan définie avec background-image. Il est possible de spécifier une répétition uniquement verticale, uniquement horizontale, ou horizontale et verticale à la fois. Cette propriété n'est pas héritée. La valeur par défaut est repeat.

Syntaxe et valeurs possibles
/* pas de répétition */ background-repeat : no-repeat ; /* répétition dans les deux axes */ background-repeat : repeat ; /* répétition horizontale */ background-repeat : repeat-x ; /* répétition verticale */ background-repeat : repeat-y ;
Visualisez un exemple.


4. background-attachment (CSS 1)


Liste des navigateurs compatibles

  • Internet Explorer 4 et supérieurs
  • Netscape 6 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété sert à indiquer la manière dont l'image d'arrière-plan réagit lorsque l'utilisateur fait défiler la page. Ainsi, il est possible de rendre l'image fixe dans l'élèment ou elle s'applique. Cette propriété n'est pas héritée. La valeur par défaut est scroll.

Syntaxe et valeurs possibles
/* l'image est fixe */ background-attachment : fixed ; /* l'image se déplace avec la page */ background-attachment : scroll ;
Visualisez un exemple.


5. background-position (CSS 1)


Liste des navigateurs compatibles

  • Internet Explorer 4 et supérieurs
  • Netscape 6 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété qui s'applique généralement lorsque l'image n'est pas répétée, permet de positionner son coin supérieur gauche par rapport au coin supérieur gauche de l'élément parent de type bloc. Cette propriété admet une ou deux valeurs (séparées par des espaces). La première indique la position horizontale, et la seconde, la position verticale. Dans le cas où il n'y a qu'une seule valeur, celle ci indique la position horizontale et la position verticale sera alors de 50% soit centrée verticalement. Il est possible d'utiliser des valeurs négatives. Toutes les unités de longueur sont utilisables. Cette propriété n'est pas héritée et les valeurs par défaut sont 0% 0%. Valeurs textuelles utilisables horizontalement left, center, right, et verticalement top, center, bottom. Il existe également les propriétés background-position-x qui permet de positionner l'image horizontalement et background-position-y qui permet de positionner l'image verticalement.

Syntaxe et valeurs possibles
/* image centrée verticalement et horizontalement */ background-position : center center ; /* image à 10 pixels du bord gauche et centrée verticalement */ background-position : 10px center ;
Visualisez un exemple.


6. background (CSS 1)


Liste des navigateurs compatibles

  • Internet Explorer 4 et supérieurs
  • Netscape 6 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété regroupe toutes les précédentes en une seule instruction. Les valeurs peuvent être spécifiées dans n'importe quel ordre, mais doivent être séparée par des espaces. Aucune valeur n'est obligatoire. Cette propriété n'est pas héritée. Elle s'applique à tous les éléments et la valeur par défaut est vide.

Syntaxe et valeurs possibles
background:#000000 url(athlete.jpg) no-repeat scroll center center;
Visualisez un exemple.



Ce document est issu de http://www.developpez.com et reste la propriété exclusive de son auteur.
La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur.
Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -