Tous les éléments HTML (qu'ils soient de type bloc ou en ligne) peuvent avoir une ou plusieurs images de fond et de nombreuses propriétés leur sont associées : provenance de l'image, position, répétition, taille, etc.

La propriété raccourci background est généralement utilisée car elle permet de condenser en une seule déclaration toutes ces propriétés.

### Définir l'image source

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().

Exemple : images de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
body { background-image: url(../exemples/img/etoiles.jpg); color: white; } section { width: 400px; margin: 1em auto; } h2 { background-image: url(../exemples/img/force.gif); padding: 0.4em 0; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; } p { background-color: rgba(255, 255, 236, 0.20); margin: 1em 0; padding: 1em; border-radius: 1em; }

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`.

Exemple : images de fond
<!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 { width: 128px; height: 102px; cursor: pointer; float: left; } #s1 { background-image: url(../exemples/img/f1.png); } #s1:hover { background-image: url(../exemples/img/f1_h.png); } #s2 { background-image: url(../exemples/img/f2.png); } #s2:hover { background-image: url(../exemples/img/f2_h.png); } #s3 { background-image: url(../exemples/img/f3.png); } #s3:hover { background-image: url(../exemples/img/f3_h.png); } #s4 { background-image: url(../exemples/img/f4.png); } #s4:hover { background-image: url(../exemples/img/f4_h.png); }

Pour une autre technique plus performante voir Sprite CSS

### Répétition de l'image de fond

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.

Exemple : répétition des images de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
body { background-image: url(../exemples/img/etoiles.jpg); color: white; } section { background-image: url(../exemples/img/potter_jedi.png); background-repeat: no-repeat; /* pas de répétition */ width: 410px; margin: 1em auto; } h2 { background-image: url(../exemples/img/force.gif); background-repeat: no-repeat; /* pas de répétition */ padding: 0.4em 0; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; } p { background-image: url(../exemples/img/star.png); background-repeat: repeat-y; /* répétition verticale */ background-color: rgba(255, 255, 236, 0.20); margin: 1em 0; padding: 1em 1em 1em 1.5em; border-radius: 1em; }

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.

image de fond (104 pixels X 104 pixels)
Exemple : répétition des images de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="space"></div> <div id="round"></div> </body> </html>
Fichier CSS : styles.css
div { background-image: url(../exemples/img/globe.png); width: 500px; height: 150px; border: 1px solid black; margin: 10px auto; } #space { background-repeat: space; } #round { background-repeat: round; }

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

background-repetition space et round

### Zone couverte par l'image de fond

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.

content-box | padding-box | border-box

Exemple : zone de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <p>Test content-box</p> <p>Test padding-box</p> <p>Test border-box</p> </body> </html>
Fichier CSS : styles.css
p { margin: 10px auto; padding: 20px; border: 10px double #ccc; background-image: url(../exemples/img/globe.png); height: 80px; width: 400px; font-size: 2em; } p:nth-of-type(1) { background-clip: content-box; } p:nth-of-type(2) { background-clip: padding-box; } p:nth-of-type(3) { background-clip: border-box;}

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`).

### Position de l'image de fond

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.

Exemple : position des images de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <section> <h2>La Guerre des Etoiles du Milieu</h2> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron.</p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> </body> </html>
Fichier CSS : styles.css
body { background-image: url(../exemples/img/etoiles.jpg); color: white; } section { background-image: url(../exemples/img/potter_jedi.png); background-repeat: no-repeat; background-position: bottom right; /* en bas à droite */ width: 410px; margin: 1em auto; padding-right: 80px; /* la marge interne à droite permet le décalage de l'image par rapport au contenu */ } h2 { background-image: url(../exemples/img/force.gif); background-repeat: no-repeat; padding: 0.4em 0; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; } p { background-image: url(../exemples/img/star.png); background-repeat: no-repeat; background-position: 0.2em 1em; /* gauche et haut */ background-color: rgba(255, 255, 236, 0.20); margin: 1em 0; padding: 1em 1em 1em 1.5em; border-radius: 1em; }

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.

différents nombres de valeurs pour background-position

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

déclalage avec valeurs positives
déclalage avec valeurs 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.

sprites google.fr
sprites facebook.fr
sprite youtube.com

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.

sprites des films

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; }

### Attachement du fond

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..

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> <div>Premier bloc de contenu</div> <div>Deuxième bloc de contenu</div> <div>Troisième bloc de contenu</div> <div>Quatrième bloc de contenu</div> </body> </html>
Fichier CSS : styles.css
body { background-image: url(../exemples/img/etoiles.jpg); /* changez fixed par scroll pour voir la différence */ background-attachment: fixed; color: white; } div { margin: 10px auto; width: 400px; height: 250px; border: 1px solid; font-size: 2em; }

### Taille de l'image de fond

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.

définition de la largeur et de la hauteur

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.

Exemple : taille de l'image de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div>Par défaut</div> <div>Largeur : 80px, hauteur 480px <br>Redimensionnement avec déformation</div> <div>Largeur : 50%, hauteur : auto <br>Redimensionnement proportionnel</div> <div>Largeur : auto, hauteur : 40px <br>Redimensionnement proportionnel</div> <div>Cover <br>L'image est redimensionnée pour couvrir un maximum de surface sans être répétée.</div> <div>Contain <br>L'image est redimensionnée pour apparaître au moins une fois en entier.</div> </body> </html>
Fichier CSS : styles.css
body { background-image: url(../exemples/img/etoiles.jpg); color: white; } div { background-image: url(../exemples/img/star.png); float: left; width: 200px; height: 150px; border: 1px solid; margin: 0 10px 10px 0; padding: 10px; } div:nth-of-type(2) { background-size: 80px 40px;} div:nth-of-type(3) { background-size: 50% auto; } div:nth-of-type(4) { background-size: auto 40px; } div:nth-of-type(5) { background-size: cover; } div:nth-of-type(6) { background-size: contain; }

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`.

Exemple : image de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div>L'image couvre toute le fond de la page sans être répétée et elle est redimensionnée en même temps que la fenêtre du navigateur.</div> </body> </html>
Fichier CSS : styles.css
body { background-image: url(../exemples/img/metal_rivets.jpg); background-size: cover; background-position: center center; background-attachment: fixed; } div { background: rgba(119, 136, 153, 0.7); margin: 30px auto; padding: 10px; width: 300px; color: white; }

### Raccourci background

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)

Propriété raccourci background

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;