Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Les propriétés CSS d'arrière-plan

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

Dans ce chapitre nous allons parler de plusieurs propriétés qui servent à personnaliser le fond d'une page web. Ces propriétés fonctionnent avec tous les balises de type bloc (div, p, h1..h6, blockquote, address, pre, ul, ol, li, table, td, tr, th, form, fieldset etc.), et tous les éléments XHTML de type inline (span, a, img pour les images transparentes, em, strong, sub, sup, q, acronym, input, textearea, select etc.).

background-color (couleur de fond)

Sachez tout d'abord que la valeur par défaut de la propriété CSS background-color est "transparent", car chaque élément laisse apparaître dans son espace blanc la couleur de l'élément parent qui se trouve immédiatement en haut de la hiérarchie. Est-ce que c'est noté ? Good !

Pour modifier cette conduite vous devez utiliser la propriété CSS background-color qui permet de personnaliser la couleur d'arrière-plan des éléments. Vous avez l'entière liberté de choisir l'une des trois méthodes de définition des couleurs (nom de la couleur en anglais, code RGB, code hexadécimal). Si vous appliquez cette propriété à la balise body, alors tout le fond du document changera de couleur. Exemple :

body { /* page avec fond bleu */
background-color: blue;
}
h1 { /* en-têtes avec fond vert */
background-color: green;
}

vous avez aussi la possibilité d'utiliser la propriété CSS background-color avec les éléments en-ligne tel qu'un span. Exemple :

<p><span style="background-color: orange;">La propriété CSS background-color</span>
permet de spécifier la couleur de fond de n'importe quel élément XHTML.</p>

La propriété CSS background-color permet de spécifier la couleur de fond de n'importe quel élément XHTML.

background-image (image d'arrière-plan)

L'image qui va servir d'arrière-plan doit faire partie des formats supportés par le web (JPEG, GIF, PNG-8, PNG-24). Si vous avez utilisé cette propriété avec la balise body. Votre document aura une image pour arrière-plan. Si l'image est trop petite par rapport aux dimensions de votre document, l'image sera répétée autant de fois horizontalement et verticalement qu'il est nécessaire pour couvrir la totalité de l'écran  :la propriété CSS background-image

Dans le cas contraire, si l'image a des proportions plus grandes que celles du fond, une partie de l'image ne sera pas affichée, c'est-à-dire la portion qui excède les dimensions du document. Voici la syntaxe :

body, h1 {
background-image: url("rap.jpg"); /* le document et les titres N° 1
auront une image pour arrière-plan. N'oubliez pas d'encadrer
l'URL par les doubles guillemets, et remarquez qu'il n'y a pas
d'espace entre le mot "url" et les parenthèses */
} 

Faites très attention concernant l'url (l'adresse de l'image). Si vous utilisez une feuille de style externe, l'URL doit être spécifiée par rapport à cette feuille et non pas par rapport à votre fichier XHTML. Mais si vous avez déclaré votre code CSS dans l'en-tête de votre document ou directement dans les balises avec l'attribut style dans ce cas-là, l'URL doit être indiquée par rapport au fichier XHTML. La syntaxe de l'URL suit les mêmes règles d'adressage que liens.

Méfiez-vous des images de grande taille qui risquent d'alourdir considérablement le temps de téléchargement, ce qui est de nature à décourager les gens à venir explorer votre site

Notez qu'il ne faut jamais mettre une image qui a une importance consistante quant au contenu de la page en arrière-plan. Car ceci va la faire échapper du corps structurel du document XHTML, en plus vous n'aurez pas la possibilité de mentionner un texte alternatif pour l'image (images accessibles). Donc cette propriété ne doit concerner que les images purement décoratives (l'accessibilité selon les types d'images).

background-repeat (répétition du fond)

Par défaut une image d'arrière-plan est répétée de façon à couvrir la totalité du document (body) ou d'un élément (h1, p, div etc.). Pour déroger à cette règle parfois agaçante, on a inventé la propriété CSS background-repeat qui accepte les quatre valeurs suivantes :

Voici des aperçus de toutes les constantes, avec une petite image pour les appréhender davantage :

reapeat (bandes horizontales et verticales d’images)

la propriété CSS background-image avec la constante repeat

repeat-x (bande horizontale d'images)

la propriété CSS background-image avec la constante x-repeat

repeat-y (bande verticale d’images)

la propriété CSS  background-image avec la constante y-repeat

no-repeat

la propriété CSS background-image avec la constante no-repeat

background-attachment (stabilité-fluidité du fond)

Par défaut une image d'arrière-plan bouge avec le texte quand on le fait défiler. Pour que l'image reste fixe vous n'avez qu'à vous servir de la propriété CSS background-attachment, les valeurs possibles sont :

background-position (Position d'arrière-plan)

Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l'écran (ou celui de n'importe quel bloc tel qu'un div). Grâce à la propriété CSS background-position, vous aurez la possibilité de changer cette position prédéfinie et de placer l'image d'arrière-plan n'importe où dans l'écran. Mais cette propriété n'est pertinente que si vous avez utilisé la propriété CSS background-repeat avec une valeur autre que repeat, c'est-à-dire repeat-x, repeat-y ou no-repeat. Les mentions possibles sont :

Astuces :

Vous pouvez mélanger les valeurs relatives et absolues (mais les notations alphabétiques s'utilisent en solo). Exemple :

body {
background-position: 50% 300px; /* image de fond centrée horizontalement
et placée à 300px en-dessous du bord supérieur du document */
}

Pensez à utiliser toujours en plus de l'image de fond une couleur de fond pour des mesures de précaution. Ainsi si le navigateur n'a pas pu télécharger l'image d'arrière-plan (connexion lente, image supprimée, renommée ou déplacée etc.), la couleur de fond va substituer à l'image. D'autre part si l'image ne couvre pas l'entièreté du fond, la couleur d'arrière-plan va combler le reste du fond. Si vous n'avez pas signalé la propriété background-color. Les parties non couvertes par le fond (si background-repeat # repeat) apparaîtront en blanc.

La propriété générique background

La méga-propriété background peut être assimilée à un raccourci, du fait qu'elle permet d'envelopper toutes les propriétés CSS : background-color, background-image, background-repeat, background-attachment et background-position. Exemple :

body {
background-color: #ffffaa;
background-image: url("texture.gif");
background-repeat: no-repeat;
background-attachment: fixed; 
background-position: center;
}
équivaut à :
body {
background: #ffffaa url("texture.gif") no-repeat fixed center;
}

Commentaires

Je parie que les propriétés CSS d'arrière-plan vous donnent beaucoup d'idées. Mais n'oubliez jamais que la simplicité prime toujours, et qu'un fond blanc suffit dans la plupart des cas

Dans les prochains tuto, on va décortiquer un sujet très intéressant en CSS : le modèle des boîtes (box model) en CSS.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau