Pour définir l'image source du fond, on utilise la propriété background-image.

La valeur de cette propriété est l'URL du fichier source, spécifiée en utilisant la fonction CSS url().

body { background-image: url(fond.png); }
#logo { background-image: url("../deco/logo.jpg"); }
div { background-image: url('images/papier.gif'); }

L'URL passée en paramètre peut être une URL relative ou une URL absolue. Elle peut être entourée avec des guillements doubles, des guillemets simples ou ne pas être entourée.

Dans l'exemple suivant on utilise 2 images de fond :
fond de la page	fond du titre
Pour mettre les textes en relief, on leur affecte une couleur de fond transparente avec la fonction de couleur rgba().

Une astuce souvent utilisée en particulier avec les éléments d'interface (icônes, menus, liens) est de mettre une image de fond et de changer cette image lorque la souris survole l'élément (ie rollover). Une technique simple est de changer la valeur de la propriété background-image en utilisant le sélecteur de pseudo-classe :hover.

Pour une autre technique plus performante voir Sprite CSS

Si une image est trop petite pour remplir entièrement le fond d'un élément, par défaut elle est automatiquement répétée horizontalement et verticalement pour couvrir toute la surface du fond.
On peut intervenir sur la répétition avec la propriété background-repeat qui peut avoir les valeurs :

• repeat : la répétition est horizontale et verticale (valeur par défaut),
• repeat-x : la répétition est seulement horizontale,
• repeat-y : la répétition est seulement verticale,
• no-repeat : pas de répétition.

Il existe 2 autres valeurs possibles pour la propriété background-repeat :

• space : l'image est répétée autant de fois que possible sans être coupée, puis des espaces égaux sont ajoutés entre les différentes images,
• round : l'image est répétée autant de fois que possible sans être coupée, puis les images sont redimensionnées pour occuper tout l'espace.

Tous les navigateurs n'implémentent pas ses 2 valeurs. Si votre navigateur n'afficha pas correctement l'exemple qui suit, essayez le avec Chrome.

Le test de l'exemple devrait donner l'affichage suivant :

Par défaut, l'image de fond s'applique sur la zone de contenu, les marges internes et sous les bordures. Avec la propriété background-clip nous pouvons rédéfinir la zone ou s'applique l'image de fond :

• content-box : l'image de fond s'applique uniquement sur la zone de contenu,
• padding-box : l'image de fond s'applique sur la zone de contenu et les marges internes,
• border-box (par défaut) : l'image de fond s'applique sur la zone de contenu, les marges internes et les bordures.

Le test de l'exemple montre que quelque soit la valeur de background-clip, le point de base servant à la répétition de l'image est situé en haut à gauche de la marge interne (padding).

Quand l'image de fond ne se répéte pas (background-repeat: no-repeat), la propriété background-position permet de positionner l'image dans le fond de la boîte par rapport à son origine de positionnement (background-origin).

La valeur de background-position est généralement un couple de valeurs permettant de définir les coordonnées horizontale et verticale de l'image.
Ces coordonnées peuvent être exprimées par des longueurs, des pourcentages et des mot-clés.

Les combinaisons possibles entre longueurs, pourcentages et mot-clés sont assez étendues (spécifications du W3C).

• quand on ne donne qu'une seule valeur, en pourcentage ou en longueur, celle-ci ne concerne que la position horizontale, la position verticale sera 50% (centrée) ;
• quand on donne deux valeurs, la première concerne la position horizontale. Les combinaisons de longueurs, pourcentages et mot-clés sont possibles ;
• quand on donne trois ou quatre valeurs, chaque pourcentage ou longueur est une valeur relative et doit être précédée par un mot-clé définissant le bord concerné. Si on donne trois valeurs, la valeur relative manquante est égale à 0.

Les valeurs de la propriété background-position peuvent être négatives.

Sprites CSS

La propriété background-position est à la base de la technique des "sprites CSS" : on utilise un seul fichier graphique pour stocker plusieurs images positionnées les unes à côté des autres, comme dans une grille d'images.
Chaque image de la grille est utilisée comme fond d'une boîte, en particulier pour les boîtes représentant des éléments d'interface comme les icônes, les barres de navigation, des décorations de liens, etc.

L'avantage de cette technique est un meilleur temps de chargement des pages car les appels au serveur Web sont limités : les requêtes HTTP sont réduites au strict minimum ainsi que le nombre de fichiers envoyés par le serveur et reçus par le navigateur. De plus la taille d'un grand fichier sera moins grande que la somme des tailles des petits fichiers qu'il réunit.

Dans l'exemple suivant on utilise une seule image pour en regrouper huit autres.

Le poids de l'image est de 49.9ko, alors que le poids total des huits images indépendantes est de 76.4ko. En plus du nombre d'octets moindre à transférer, il y aura une seule requête HTTP plutôt que huit, donc une charge bien moindre pour le serveur.

Exemple : sprites CSS

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <nav> <h3>Choisissez un film</h3> <a id="s1"></a> <a id="s2"></a> <a id="s3"></a> <a id="s4"></a> </nav> </body> </html>

Fichier CSS : styles.css

body { background-image: url(../exemples/img/etoiles.jpg); color: white; } nav { margin: 10px auto; width: 260px; } nav a { background-image: url(../exemples/img/films.png); width: 128px; height: 102px; cursor: pointer; float: left; } #s1 { background-position: 0 0; } #s1:hover { background-position: 0 -102px; } #s2 { background-position: -128px 0; } #s2:hover { background-position: -128px -102px; } #s3 { background-position: -256px 0;} #s3:hover { background-position: -256px -102px; } #s4 { background-position: -384px 0; } #s4:hover { background-position: -384px -102px; }

La propriété background-attachment définit comment l'image se déplace quand la page est déplacée avec les ascenceurs verticaux ou horizontaux :

• scroll (par défaut) : le fond se déplace en même temps que l'élément,
• fixed : le fond reste toujours à la même place par rapport à la fenêtre du navigateur,
• local : le fond se dépalec en même temps que le contenu de l'élément..

On peut définir la taille de l'image de fond avec la propriété background-size.
Les valeurs de cette propriété peuvent être des longueurs (avec n'importe quelle unité) ou des mots-clés.

On peut aussi utiliser les mots-clés cover et pour contain à la place des dimensions de largeur et hauteur. Dans ce cas l'image est redimensionnée sans déformation :

• avec cover c'est la proportion entre la plus petite dimension de l'image et la plus grande dimension de la boîte qui sert de base au redimensionnement,
• avec contain c'est la proporion entre la plus grande dimension de l'image et la plus petite dimension de la boîte qui sert de base au redimensionnement.

L'exemple suivant présente une page avec une image de fond qui occupe automatiquement toute la surface de la page et qui se rédimenssionne en même temps que la page (testez de préférence avec le bouton 'Tester dans pop-up' et redimenseionnez la fenêtre de test pour voir l'effet).
On utilisera pour cette réalisation les propriétés :

• background-image,
• background-size avec la valeur cover,
• background-position avec la valeur center center,
• background-attachment avec la valeur fixed.

La propriété-raccourci background permet de définir en une fois :

• la source de l'image de fond (ie background-image)
• la position de l'image de fond (ie background-position)
• la taille de l'image de fond (ie background-size)
• la répétition (ie background-repeat)
• l'attachement (ie background-attachment)
• le point de départ de l'image (ie background-origin)
• la couleur de fond (ie background-color)

Le plus souvent on trouvera ces sortes de raccourcis :

/* Uniquement une couleur de fond */
background: rgb(146, 35, 240);
/* Uniquement une image avec répétition horizontale et verticale */
background: url(images/fond.png);
/* Une image sans répétition */
background: url(images/logo.png) no-repeat;
/* Une image positionnée et une couleur de fond */
background: url(images/icone.png) 10px center no-repeat #FF45A9;