Note : Les Web Développeurs doivent toujours s'assurer de spécifier une -color,
même si l'image est opaque et que la couleur ne s'affiche pas dans des circonstances normales.
Si l'image ne peut pas être chargée, par exemple quand la connexion est coupée, la couleur de fond sera utilisé en recours.
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.
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
- inherit
Voyons les propriétés les unes après les autres, comment elles fonctionnent et quels sont leurs effets.
NOTE: Color Chooser ("une boite à couleurs") est intégré dans Geany ce qui est vraiment pratique.
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);
La valeur 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.
Ce que j’emploi le plus c’est :
- background-color: #000000;
- background-color: red;
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.
- Exemple : background-image:url(images/image_de_fond.png);
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 . ==> ../images/mon_image.jpg
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.)
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.
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.
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, 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.
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;
- left, => gauche
- center, => centre
- right, => droite
- top, => gauche
- bottom => bas
- scroll, indique que l'image d'arrière-plan défilera dans la fenêtre d'affichage en même temps que le bloc qui la contient.
- fixed indique que l'image d'arrière-plan ne défilera pas avec le bloc qui la contient, mais restera fixe dans la fenêtre d'affichage.
- local, indique que l'image d'arrière-plan ne défilera pas avec le bloc qui la contient, mais défilera quand le contenu de l'élément défile : elle est fixe par rapport au contenu de l'élément.
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.
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.