Bonjour,

Tout comme pour la couleur de fond, l'image de fond ne s'applique pas forcément à la page entière, on peut tout aussi bien mettre une image de fond aux titres, paragraphes, citations etc...

La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit lui mettre url("nom_de_l_image.png"). Par exemple :
background-image:url("fond.png");

Bien entendu, votre fond n'est pas forcément en PNG, il peut aussi être en JPEG ou en GIF.
L'adresse indiquant où se trouve l'image de fond peut être en absolu (http://...) ou en relatif (fond.png).
Attention lorsque vous mettez une adresse en relatif dans le fichier CSS ! L'adresse de l'image doit être indiquée par rapport au fichier .css et non pas par rapport au fichier .html.
Ainsi, si votre site comporte 2 dossiers : "css" et "images", il vous faudra taper : "../images/fond.png" pour récupérer l'image de fond. Si vous ne mettez pas le chemin correct, votre image de fond ne s'affichera pas.

Si on veut appliquer une image de fond à toute la page, on doit là encore utiliser la balise :

Code:

body
{
  background-image: url("../images/neige.png");
}
h1
{
  font-style: italic;
  font-family: "Arial Black", Arial, Verdana, serif;
  text-align: center;
}
blockquote p /* Tous les paragraphes contenus dans un blockquote */
{
  text-align: justify;
  text-indent: 25px;
}

Il existe par ailleurs une propriété CSS qui permet de "fixer" le fond, pour ne pas qu'il bouge en même temps que le texte. L'effet obtenu est, je trouve, intéressant.
La propriété concernée répond au doux nom de background-attachment et peut prendre 2 valeurs :
fixed : l'image de fond reste fixe.
scroll : l'image de fond défile avec le texte (par défaut).

En réutilisant le même fichier XHTML que tout à l'heure, mais en changeant un peu le CSS pour y rajouter background-attachment, on obtient ceci :

Code:

body
{
  background-image: url("../images/neige.png");
  background-attachment: fixed; /* Le fond restera fixe */
}
h1
{
  font-style: italic;
  font-family: "Arial Black", Arial, Verdana, serif;
  text-align: center;
}
blockquote p
{
  text-align: justify;
  text-indent: 25px;
}

Essayez de descendre plus bas dans la page avec les barres de défilement, vous verrez que le fond reste fixe

Il reste encore 2 propriétés en rapport avec les images de fond que je souhaite vous montrer.
La première d'entre elle est celle qui gère la répétition de l'image de fond. Cette propriété s'appelle background-repeat et peut prendre ces valeurs :
no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
repeat : le fond sera répété (par défaut).

Gardons encore notre même fichier XHTML, mais appliquons cette fois un fond dégradé qui se répète uniquement verticalement.
Voici l'image de fond que j'ai créée moi-même tout seul comme un grand sous Photoshop (oui ça mérite d'être souligné tant mon niveau en dessin est faible :p) :

Code:

body
{
  background-image: url("../images/degrade.png");
  background-repeat: repeat-y; /* Le fond ne se répètera que sur la première colonne, verticalement */
}
h1
{
  font-style: italic;
  font-family: "Arial Black", Arial, Verdana, serif;
  text-align: center;
}
blockquote p
{
  text-align: justify;
  text-indent: 25px;
}

Enfin, la dernière des propriétés sur le fond que je tenais à vous montrer (comme ça on les aura toutes vues) concerne la position de l'image de fond.
On peut indiquer où doit se trouver l'image de fond avec background-position. Cette propriété n'est intéressante que si vous avez mis "background-repeat: no-repeat;" (un fond qui ne se répète pas).

Vous devez donner à background-position 2 valeurs en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page (ou du paragraphe si vous appliquez le fond à un paragraphe). Ainsi, si vous tapez :
background-position:30px 50px;
... votre fond sera placé à 30 pixels de la gauche et à 50 pixels du haut. Il est aussi possible de mettre ces valeurs en anglais :
top : en haut.
bottom : en bas.
left : à gauche.
center : centré.
right : à droite.

Il est possible de combiner ces mots. Par exemple, pour aligner une image en haut à droite, vous taperez :background-position: top right;

Allez, pour ce dernier exemple je vais réutiliser toutes les propriétés sur le fond qu'on a apprises

Code:

body
{
  background-image: url("../images/skieur.gif"); /* Le fond est l'image "skieur.gif" */
  background-repeat: no-repeat; /* Le fond ne se répète pas */
  background-position: top right; /* Le fond est aligné en haut à droite */
  background-attachment: fixed; /* Le fond est fixé */
}
h1
{
  font-style: italic;
  font-family: "Arial Black", Arial, Verdana, serif;
  text-align: center;
}
blockquote p
{
  text-align: justify;
  text-indent: 25px;
}

Si vous utilisez beaucoup de propriétés en rapport avec le background (comme c'est le cas sur cet exemple), vous pouvez utiliser une sorte de "méga-propriété" background qui peut prendre plusieurs valeurs combinées des propriétés background-image, background-repeat, background-attachment et background-position.
C'est la première "méga-propriété" que je vous montre, il y en aura d'autres. Pour toutes les "méga-propriétés" comme background, il faut savoir que :
L'ordre des valeurs n'a pas d'importance. Vous pouvez combiner les valeurs dans n'importe quel ordre :
background: url("../images/skieur.gif") no-repeat top right fixed;
background: no-repeat fixed top right url("../images/skieur.gif");
Vous n'êtes pas obligés de mettre toutes les valeurs. Ainsi, si vous ne voulez pas mettre fixed, vous pouvez l'enlever sans problème :
background:url("../images/skieur.gif") no-repeat top right;

La "méga-propriété" n'est intéressante que si vous avez plusieurs valeurs à combiner bien entendu
L'exemple ci-dessous donne le même résultat que l'exemple précédent, mais il utilise background pour combiner les valeurs et rendre le fichier CSS plus petit :

Code:

body
{
  background: url("../images/skieur.gif") no-repeat top right fixed;
}
h1
{
  font-style: italic;
  font-family: "Arial Black", Arial, Verdana, serif;
  text-align: center;
}
blockquote p
{
  text-align: justify;
  text-indent: 25px;
}

Une dernière chose : dans tous ces exemples, j'ai appliqué un fond à la page entière (body). Mais cela ne doit pas vous faire oublier qu'on peut appliquer un fond à n'importe quel élément (un titre, un paragraphe, certains mots d'un paragraphe etc)...
Je vous conseille donc pour vous entraîner d'essayer d'appliquer un fond à vos titres ou paragraphes. Si vous avez un peu de goût (ce que je n'ai pas) vous arriverez certainement à donner une très belle allure à votre page web