On revoit les bases : la propriété « background »

Par Paul O’Brien

La propriété CSS background vous permet d'appliquer à tout élément de votre choix des couleurs ou des images de fond. Mais il y a plein de petits bugs et de défauts qui peuvent surprendre le développeur non averti.

D'abord c'est quoi un fond ?

Le fond d'un élément, c'est à la fois sa largeur et sa hauteur totales, y compris le remplissage et les bordures qui lui ont été appliqués. Cela ne comprend pas les marges de notre élément. Donc le fond d'un élément se trouvera en dessous du contenu de premier plan, y compris son remplissage (« padding »), et il sera également présent sous les bordures qui ont été déclarées.

Si un élément a des bordures transparentes, on doit pouvoir voir l'image qui se trouve en dessous. Notez toutefois que IE6 et ses prédécesseurs ne traitent pas les bordures transparentes, et de toutes façons le reste des règles est très mal interprété puisqu'ils considèrent que le fond s'arrête au bord intérieur des bordures.

Le mieux est de voir cela à travers un petit exemple que vous pouvez tester sous IE6 et Firefox pour comparer les différences.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test de Fond</title>

<style type="text/css">

#test{
width: 100px;
height: 100px;
background: red;
border: 10px dashed green;
}

</style>
</head>
<body>

<div id="test">test</div>

</body>
</html>

J'ai choisi des bordures vertes et pointillées pour que vous puissiez voir le fond dans les intervalles. Comme on le voit, sous IE (y compris IE7) la couleur de fond n'atteint que la frontière intérieure de la bordure, alors que la plupart des autres navigateurs laissent glisser la couleur de fond sous la bordure jusqu'à atteindre la frontière extérieure du conteneur.

Au quotidien, c'est rarement un problème, mais cela reste une chose dont il faut être bien conscient.

Les propriétés du fond

Dans la plupart des cas, ce qui suit renvoie aussi bien aux éléments en bloc qu'aux éléments définis en ligne, à ceci près que la répétition et le positionnement de l'image de fond pour les éléments en ligne ne sont pas définis dans la spécification CSS2.1.

Voici les propriétés du fond :

Voyons les propriétés les unes après les autres, comment elles fonctionnent et quels sont leurs effets.

background-color

Valeurs possibles : couleur | transparent | inherit

Comme on peut s'en douter, c'est ainsi qu'on détermine la couleur de fond d'un élément. On peut la préciser de différentes façons :

background-color: #000000;

ou en groupes de trois chiffres :

background-color: #000;

Vous pouvez aussi utiliser l'un des mots-clés de couleurs disponibles :

background-color: red;

Ou enfin, vous pouvez choisir la méthode de couleurs rgb :

background-color: rgb(0,0,0);

(Le W3C en dit davantage sur les différentes méthodes pour appliquer une couleur.)

La valeur initiale (ou « par défaut ») du fond d'un élément est transparent, ce qui permet à un élément de venir se superposer à un autre, tout en permettant de toujours voir le fond par transparence. La plupart du temps, ce ne sera pas utile de le déclarer, sauf si on souhaite annuler une couleur de fond qui aurait été préalablement définie pour cet élément.

Au passage, je vous conseille de prendre l'habitude de toujours indiquer une couleur de premier plan en même temps qu'une couleur de fond, pour éviter le risque d'avoir une couleur identique ou quasi-identique entre le premier plan et le fond (soit par héritage de valeur, soit à cause des feuilles de style des utilisateurs). Même si ce n'est pas toujours possible (par exemple si votre fond est transparent), cela reste une idée à garder en tête et à vérifier au fur et à mesure du codage.

Quand on applique une couleur de fond background-color à un élément, il faut qu'une partie de cet élément soit visible pour qu'on puisse voir ce fond. Si l'élément n'a pas de hauteur (ce qui est le cas quand il ne contient que des éléments enfants placés en flottement), alors aucune couleur de fond ne sera visible. Il s'agit là d'une erreur courante chez les débutants, et il faut s'assurer que votre conteneur occupe bien de l'espace sur l'écran si vous voulez que le fond soit visible.

background-color: inherit; —inherit permet à l'élément d'hériter de la propriété background-color de son parent. On croit souvent par erreur que les couleurs de fond sont héritées par défaut, mais ce n'est pas le cas ; et lorsque l'on voit la couleur de fond du parent s'appliquer sur l'élément enfant, c'est parce que le fond de ce dernier est transparent.

background-image

Valeurs possibles : uri | none | inherit

La propriété background-image vous permet de placer une image dans le fond de l'élément concerné. La seule chose à faire est d'indiquer le bon chemin vers l'image :

background-image:url(image-d-exemple.gif);

Notez que le chemin de l'image est relatif à l'emplacement du fichier CSS, et non pas à la page HTML qui l'appelle, donc assurez-vous que vous indiquez le bon emplacement ; dans notre exemple, si on suppose que notre CSS est placée dans un dossier /css, nous indiquons une image située dans le dossier /images qui est au même niveau que le dossier CSS :

background-image:url(../images/image-d-exemple.gif);

Il n'est pas nécessaire d'entourer l'url avec des doubles guillemets (ils sont optionnels) mais leur emploi est valide :

background-image:url("../images/image-d-exemple.gif");

Les guillemets simples (') sont également autorisés, mais ils déclenchent un bug sous IE5/Mac qui empêchera complètement l'affichage de vos images.

Par défaut, l'image sera placée dans le coin supérieur gauche de l'élément et en mosaïque (c'est-à-dire qu'elle sera répétée). Elle sera solidaire du document si on fait dérouler la page. Il s'agit là de réglages par défaut, mais vous pouvez les adapter avec des propriétés spécifiques. Voici un exemple basique d'une image de fond appliquée à l'élément body.

body {
  margin: 0;
  padding: 0;
  background-image: url(images/etoile.jpg);
}

Le code ci-dessus va disposer notre image d'étoile en mosaïque, en commençant par le coin supérieur gauche de la page et en continuant jusqu'à ce que la fin de la ligne soit atteinte. Puis une nouvelle ligne sera disposée en mosaïque en dessous, et ainsi de suite jusqu'à ce que tout l'élément body soit rempli.

Remarquez que l'image est coupée en fin de ligne, et c'est une nouvelle image complète qui apparaît à la ligne suivante. Il n'y a aucun moyen de régler l'écartement de la mosaïque (sauf en ajoutant de l'espace sur l'image elle-même).

Le fait de placer une image de fond n'aura aucun effet sur la taille de l'élément, donc il faut vous assurer qu'il y a suffisamment de hauteur et de largeur pour que l'image puisse être vue, ou bien suffisamment de contenu pour étirer les limites du conteneur.

background-image: none;— assez facile à deviner... permet tout simplement de s'assurer qu'aucune image ne sera affichée en fond d'élément.

background-image: inherit;— pour pouvoir hériter de l'image de fond d'un élément parent, la valeur inherit est possible mais elle est rarement utilisée. Les images se retrouvent en couches successives, celle de l'élément enfant recouvrant celle du parent ; tout cela peut tourner au fouillis, dans la mesure où les images ne seront pas parfaitement alignées.

background-repeat

Valeurs possibles : repeat | repeat-x | repeat-y | no-repeat | inherit

Cette propriété vous permet de définir la direction dans laquelle l'image de fond sera répétée, ou bien de l'empêcher de se répéter.

background-repeat: repeat;— La valeur par défaut répète l'image, à la fois sur l'axe horizontal et sur l'axe vertical. (Cela ne signifie pas que l'image est seulement répétée de gauche à droite et du haut vers le bas, mais qu'elle est répétée le long des deux axes, dans les deux directions, et ce jusqu'à ce que toute la zone soit couverte comme dans l'image 1 ci-dessus.)

background-repeat: repeat-x;— En donnant la valeur repeat-x, l'image sera uniquement répétée dans le sens horizontal. La répétition s'effectue dans les deux directions de l'horizontale, jusqu'à ce que toute la rangée soit couverte. La position de départ est par défaut en haut et à gauche, mais cela peut être changé : voir background-position plus bas.

Comme on le voit sur l'image ci-dessus, seul l'axe des x (horizontal) est rempli par notre image d'étoile.

background-repeat: repeat-y;— Ceci donnera l'effet inverse de repeat-x : au lieu de se répéter horizontalement, l'image ne se répètera que sur l'axe vertical. Comme précédemment, l'image sera placée en mosaïque vers le haut et le bas de l'axe vertical jusqu'à ce que toute la colonne soit pleine.

background-repeat: no-repeat;— Ceci empêche le positionnement en mosaïque. L'image est alors placée à la position indiquée par background-position, mais si aucune position n'est indiquée, ce sera par défaut le coin supérieur gauche de l'élément.

background-repeat: inherit;— L'élément hérite de la propriété background-repeat de son parent, mais en principe ce n'est pas quelque chose qu'on utilise de façon courante.

background-position

Valeurs possibles : unités de longueur fixes (par ex. pixels) | pourcentages | mots-clés

Quand on place une image de fond, on peut indiquer sa position de départ de plusieurs façons, la plus simple étant d'indiquer la position exacte en pixels.

background-position: 100px 200px;— Le coin supérieur gauche de l'image sera placé à 100px du côté gauche de l'élément, et à 200px sous son côté supérieur ; la position est toujours donnée avec d'abord l'horizontale, puis la verticale. Si une seule valeur est utilisée, on considère que cela ne concerne que la position horizontale, et la verticale restera par défaut à cinquante pour cent.

Conjointement avec un arrière-plan en mosaïque (voir images plus haut), la position que l'on indique est celle où l'image va d'abord être placée, avant de se trouver répétée le long des axes horizontaux ou verticaux selon le type de background-repeat qui a été choisi. L'image se répétera dans les deux sens le long de chaque axe.

background-position: 50% 100%;— Lorsqu'on utilise les pourcentages pour placer une image de fond, les choses sont gérées de manière un peu différente. La mesure en pourcentage ne renvoie pas uniquement à la position au sein de l'élément lui-même, mais également à ce point précis à l'intérieur de l'image. Si vous deviez indiquer background-position: 50% 100%;, la position horizontale à 50% de l'image (c'est-à-dire son axe central) serait alignée avec la position horizontale à 50% de l'élément, tandis que la verticale à 100% de l'image (c'est-à-dire le bas) serait alignée avec la verticale à 100% de l'élément (son côté inférieur).

Pour mieux expliquer, comparons background-position: 50% 50%; à son équivalent si nous étions en positionnement absolu. Si vous indiquez un position: absolute avec left: 50% et top: 50%, cela déplacera le coin supérieur gauche de l'élément au milieu de son parent : l'élément lui-même ne sera pas centré, il se situera alors dans le quart inférieur droit de son parent.

En revanche, quand les pourcentages sont utilisés dans la propriété background-position, cela ne renvoie pas au coin supérieur gauche de l'élément, mais au pourcentage correspondant pour l'image elle-même, ce qui signifie que background-position: 50% 50%; placera l'image parfaitement au centre de l'élément-parent.

En bas, l'image de fond a été placée à top: 50% et left: 50% ce qui aligne le coin supérieur gauche de l'image avec le milieu exact de l'élément. L'image de fond en haut est placée à 50% 50% et, comme vous pouvez le constater, le centre de l'image correspond exactement au centre du conteneur.

Dommage d'ailleurs qu'il n'existe pas une méthode aussi efficace pour les images de premier plan ou pour les éléments en bloc...

Comme vous l'avez sûrement compris maintenant, le choix de background-position: 100% 100%; place la position 100% de l'image (son coin inférieur droit) juste sur la position à 100% de l'élément (son coin inférieur droit à lui aussi), ce qui permet à l'enfant de se blottir juste dans le coin de son parent.

Vous pouvez aussi mélanger pixels et pourcentages si c'est nécessaire :

background-position: 50% 200px;

Désormais, il est également autorisé de mélanger les mots-clés (voir ci-dessous) et les valeurs en pourcentage ou en pixels (c'est là un point modifié dans CSS2.1, et qui n'était pas autorisé jusqu'alors). Je ne recommande pourtant pas de les mélanger, car seuls les navigateurs modernes sauront l'interpréter ; il n'y a pas d'avantage réel, dans la mesure où on peut tout simplement utiliser à la place les mesures équivalentes en pourcentages.

Mots-clés

Il existe aussi plusieurs mots-clés utilisables pour placer l'image de fond : pour la position horizontale on peut utiliser left, center, ou right, et pour la position verticale on peut choisir entre top, center ou bottom.

Cela signifie que pour situer une image en haut et à gauche d'une page, on peut utiliser background-position: left top;

Voici la liste complète.

Contrairement aux unités de longueur, il n'est pas utile de maintenir les mots-clés dans un ordre horizontal-vertical précis. On peut ainsi indiquer par exemple background-position: top left; au lieu de background-position: left top;.

Si on n'utilise qu'un seul mot-clé au lieu de deux, voici ce que cela va donner :

background-attachment

Valeurs possibles : scroll | fixed | inherit

background-attachment: scroll;— La propriété background-attachment sert à déterminer si l'image de fond peut dérouler verticalement en même temps que le document ou bien si elle reste fixe. Par défaut, la valeur est scroll, ce qui signifie que si on fait dérouler le document vers le haut ou vers le bas, l'image montera et descendra en même temps.

Le seul cas où l'image ne déroule pas, c'est lorsqu'elle est placée dans un conteneur auquel on a attribué la valeur overflow: auto. L'image déroule alors, non pas en conjonction avec le conteneur mais avec l'ensemble du document. Le contenu du conteneur lui-même déroule par-dessus l'image, qui reste fixe et visible au sein de ce conteneur. IE6 et IE7 fonctionnent différemment sur ce point, en faisant dérouler l'image à l'intérieur du conteneur. Je rentrerai dans les détails plus loin en expliquant la valeur fixed, car on y verra des informations qui concernent à la fois les valeurs fixed et scroll.

background-attachment: fixed;— L'emploi de la valeur fixed va fixer une image en position dans le document, de façon à ce que l'image ne bouge pas du tout même si on fait dérouler le document vers le haut ou vers le bas, mais reste au contraire à sa place de départ (relative à la fenêtre d'affichage). Donc si on place une image dans le fond de <body> à 50% 50%, tout en utilisant la valeur fixed, l'image reste attachée au centre de la fenêtre d'affichage même si le document lui-même déroule vers le haut ou vers le bas. C'est assez utile si vous voulez avoir une image de fond et qu'elle reste toujours visible, indépendamment du contenu qui pourrait se dérouler.

Malheureusement, la valeur fixed se révèle un peu plus compliquée à utiliser lorsqu'on l'emploie sur d'autres éléments que body, et le concept peut être un peu difficile à comprendre au premier abord.

Le principe de base (et celui qui pose le plus de problèmes) est qu'une image de fond est toujours placée par rapport à la fenêtre d'affichage, et pas par rapport à l'élément dans lequel elle réside.

Réfléchissez bien à ce point pendant un instant, imprégnez-vous de l'idée.

NB : il faut préciser tout de suite que l'explication qui suit ne s'applique pas à IE6 ni aux versions précédentes, qui respectent très mal les règles sur ce point précis, j'y reviendrai. IE7, en revanche, suit bien le format expliqué ci-dessous.

Si vous avez un élément qui est centré sur la page, et que vous indiquez une background-position de 10px 10px en vous attendant à ce que l'image soit à 10px du coin supérieur gauche de cet élément, eh bien... vous avez tort. La position 10px 10px est toujours donnée par rapport à la fenêtre d'affichage, et donc l'image sera placée à 10px du coin supérieur gauche de votre fenêtre d'affichage, ce qui peut se révéler très éloigné de l'élément dans lequel vous l'aviez placé ! Il y a de grandes chances pour que vous pensiez que l'image ait disparu, car elle n'apparaîtra que lorsque l'élément dans laquelle elle réside se trouvera placé dans la fenêtre d'affichage dans la même position que celle indiquée par background-position.

Houlà, c'est bien compliqué tout ça...

Voyons un exemple pour éclaircir ce point. Je vais placer un élément de façon absolue à 100px du coin supérieur gauche de la page, et y appliquer background-image: fixed; à 10px 10px comme ceci :

#element_eloigne {
  position: absolute;
  left: 50px;
  top: 100px;
  width: 200px;
  height: 200px;
  background: url(images/dw-star.jpg) no-repeat fixed 10px 10px;
  border: 1px solid red;
}

Voici le résultat du code ci-dessus (sous Firefox 2.0) :

On dirait que l'image a disparu, comme je l'avais annoncé. Bien sûr, en réalité elle n'a pas disparu ; mais comme elle a été placée à 10px 10px par rapport à la fenêtre d'affichage, elle ne sera visible que lorsque l'élément (entouré de rouge dans l'image ci-dessus) sera installé à cette même position de 10px 10px. Pour que les choses soient plus claires, plaçons plutôt la boîte entourée de rouge à 30px du haut de l'écran.

#element_eloigne {
  position: absolute;
  left: 50px;
  top: 30px;
  width: 200px;
  height: 200px;
  background: url(images/dw-star.jpg) no-repeat fixed 10px 10px;
  border: 1px solid red;
}

Ah, voilà ! Maintenant, il devient possible de voir une partie de l'image parce que notre boîte rouge est venue recouvrir la position de fond où notre image a été placée. Et si on déplace la boîte rouge jusqu'à la position 10px 10px, c'est toute l'image qui devient visible.

À quoi ça sert tout ça ? Et qu'est-ce qu'on fait pour IE6 ?

Maintenant que vous savez comment trouver votre image de fond en position fixed, vous vous demandez peut-être : « En quoi et comment tout ça peut m'être utile ? »

Nous devons d'abord comprendre la façon dont IE6 (et ses prédécesseurs) se comporte, et il nous faut un autre exemple.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans titre</title>
    <style type="text/css">
      * {margin:0;padding:0}
      #element_eloigne {
        position: absolute; 
        left: 100px; 
        top: 100px; 
        width: 400px; 
        height: 300px; 
        background: url(images/volcano-1.jpg) no-repeat fixed 10px 10px; 
        border: 1px solid red; 
      }
    </style>
  </head>
  <body>
    <div id="element_eloigne">
      <p>test</p>
    </div>
  </body>
</html>

L'image est placée à l'intérieur de #element_eloigne et on a indiqué fixed pour son background-attachment. La position 10px 10px va situer l'image au coin supérieur gauche de la fenêtre d'affichage (et non pas au coin de #element_eloigne, j'espère que vous avez bien suivi !).

Regardez cet exemple de positionnement fixe, à voir d'abord sous IE6 puis sous Firefox (ou tout autre navigateur moderne). Si vous ne disposez pas de ces deux navigateurs, voici des impressions d'écran pour que vous puissiez voir les différences :

Comme on le voit, sous Firefox seule la partie de l'image qui coïncide avec la position de #element_eloigne est révélée. Le reste de l'image reste dissimulé.

IE6 et ses prédécesseurs, eux, font tout de travers et placent l'image en haut et à gauche (à 10px 10px) de #element_eloigne et non pas de la fenêtre d'affichage. Le problème est que l'image reste fixée en position, et si du contenu devait dérouler au sein de ce conteneur rouge, l'image ne bougerait pas et le contenu déroulerait par-dessus.

Malgré tout, l'image ne restera pas en place si tout le document déroule : la boîte rouge va dérouler et disparaître de la page (avec l'image). En fait, le comportement que l'on constate en utilisant fixed pour IE est similaire à celui que l'on obtiendrait sous Firefox si on avait utilisé le scroll par défaut au lieu de fixed. Comme si tout ça n'était pas déjà assez compliqué !

Sous Firefox, une image placée en fond d'élément avec scroll (la valeur par défaut) restera toujours visible dans le conteneur. Si overflow: auto a été appliqué au conteneur, et si les barres de défilement sont actives, l'image ne déroulera pas ; seul le contenu de premier plan défilera, laissant l'image visible en permanence. Toutefois, le même scroll sous IE6 va faire défiler l'image dans ce conteneur avec le contenu et disparaître avec lui le cas échéant.

À l'aide du code suivant, nous pouvons provoquer ces deux comportements différents dans nos navigateurs préférés 

background: url(images/dw-star.jpg) no-repeat scroll 10px 10px;

Pour que IE6 se comporte comme Firefox quand on applique scroll, il faudrait utiliser à la place la valeur fixed (avec un « hack » ou un commentaire conditionnel pour ne cibler que IE6), mais il n'y a aucune façon de faire en sorte qu'IE6 interprète correctement la valeur fixed comme avec Firefox.

J'ai indiqué plus haut que IE7 comprend désormais la valeur fixed, mais du coup, cela provoque un comportement très particulier quand scroll est employé : IE7 se comporte comme IE6 et laisse l'image défiler au sein du conteneur (contrairement à d'autres navigateurs qui laissent l'image visible dans le conteneur même si le contenu de premier plan défile), donc sous IE7 il n'y a aucun moyen de laisser l'image visible au sein d'un conteneur que l'on fait dérouler (comme dans l'exemple ci-dessus avec Firefox). Si on utilise fixed, alors l'image est fixée par rapport à la fenêtre d'affichage, mais si on utilise scroll, alors l'image déroule avec son conteneur. Conclusion : IE7 interprète background-attachment: fixed correctement, mais pas scroll.

On peut encore parler d'autres associations de comportements quand on emploie fixed : qu'arrive-t-il à une image ainsi fixée lorsque le document défile, et que l'élément qui contient l'image fixée défile lui aussi ?

J'ai fait défiler le conteneur ainsi que le document et, comme vous le voyez, l'image avec la valeur fixed n'a pas bougé du tout sous Firefox. Le conteneur parent glisse par-dessus l'image, en révélant progressivement des morceaux de celle-ci en passant au dessus, mais l'image elle-même ne bouge jamais ; il n'y a que lorsque le conteneur passe au-dessus qu'elle est visible. IE7 se comporte exactement de la même façon sur ce point.

IE6, en revanche, garde l'image fixe au sein du conteneur parent, mais dès qu'on fait dérouler le document, le tout disparaît vers le haut.

La conclusion logique de tout cela est qu'on ne peut utiliser background-attachment: fixed de manière identique pour tous les navigateurs que si on l'applique à l'élément <body>, car c'est le seul moment où IE6 l'interprète correctement. Bien sûr, dès lors que vous en connaissez les limites, vous pouvez toujours utiliser les commentaires conditionnels pour donner à IE la version de base, et permettre aux bons navigateurs d'avoir la bonne version.

Inherit

Quand on utilise background: inherit, l'élément va hériter des propriétés de fond de son parent. C'est rarement une bonne chose à faire. La valeur par défaut du fond d'un élément étant transparent, le fond du parent sera déjà visible dans l'élément enfant. Il n'y a donc aucun besoin de préciser inherit.

IE6 et Safari 2.0 ont également un petit bug lié à background: inherit puisque background: inherit n'actualise pas la couleur de fond.

Raccourcis

En CSS, la propriété background est un raccourci qui permet d'indiquer plusieurs styles de fond pour un même élément en une seule fois. Vous avez peut-être remarqué que dans certains des exemples précédents j'ai utilisé la version raccourcie pour définir toutes les propriétés de fond d'un coup.

On peut économiser beaucoup de code et de temps à l'aide des raccourcis CSS, et je les utilise moi-même dès que possible. Prenez ce code par exemple :

#test {
  background-color: #000; 
  background-image: url(nom_de_l_image.jpg); 
  background-position: 10px 10px; 
  background-repeat: no-repeat; 
  background-attachment: fixed; 
}

On peut le réduire à une seule ligne :

#test {
  background: #000 url(nom_de_l_image.jpg) no-repeat fixed 10px 10px; 
}

Ça économise pas mal de code, donc ça en vaut vraiment la peine.

Une chose qu'il ne faut pas oublier quand on emploie les raccourcis (et cela vaut pour tous les éléments raccourcis), c'est que toutes les propriétés qui ne sont pas intégrées dans le raccourci recevront leurs valeurs par défaut. Donc avec une règle comme celle-ci :

#test {
  background-color: red; 
  background: url(nom_de_l_image.jpg); 
}

La couleur rouge (red) ne sera pas appliquée, parce que la ligne qui suit, en style raccourci, remet la couleur à sa valeur par défaut (c'est-à-dire transparent) dès lors qu'elle n'a pas été explicitement précisée. C'est également vrai de toutes les valeurs qui n'ont pas été précisées dans cette règle : toutes les propriétés non précisées reviendront à leurs valeurs initiales par défaut, annulant ainsi toutes les règles préalablement données.

Dans le raccourci, peu importe l'ordre dans lequel vous placez la plupart des propriétés de fond puisque le navigateur les reconnaîtra de toutes façons, mais le format courant est généralement celui-ci :

background: #000 url(nom_de_l_image.jpg) no-repeat fixed 10px 10px;

(Bien sûr, l'ordre dans lequel vous indiquez les coordonnées de background-position a par contre une importance puisque celles-ci seront appliquées d'abord pour l'horizontale, et ensuite pour la verticale. Voyez ci-dessus la partie qui traite de background-position pour davantage de détails.)

Résumé

Nous avons traité de la plupart des points liés à la propriété background et à ses valeurs associées, et en usage courant ces propriétés CSS peuvent vous donner beaucoup de contrôle sur l'aspect des éléments de votre design. Comme vous le voyez, la propriété background est très polyvalente. On peut en faire de très belles choses, et (avec un peu d'imagination) produire des effets très impressionnants.

http://www.digital-web.com/articles/web_design_101_backgrounds/

Fiche technique

À propos de l'auteur

Paul O’Brien est un designer Web indépendant né à Londres qui, comme on peut le voir sur son site www.pmob.co.uk, s’intéresse particulièrement aux CSS. Outre l’article que nous traduisons ici, il a publié plusieurs fois sur digital-web.com. Sa phrase fétiche : « Hope that helps ! » (J’espère que je vous ai été utile...)

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

CSS

© 2001-2024 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site