background-image

background (pour définir en une seule fois tout ce qui se rattache au fond)
background-attachment (précise si le fond défile avec le contenu ou non)
background-image (définit l'image placée en fond de bloc)
background-position (définit la position de l'image de fond)
background-position-x (définit la position horizontale de l'image de fond)
background-position-y (définit la position verticale de l'image de fond)
background-repeat (précise si l'image doit être répétée ou non)
background-color (définit une couleur de fond pour un élément)
layer-background-image (Image d'arrière plan et de la bordure dans Netscape Navigator)
layer-background-color (Couleur d'arrière plan et de la bordure dans Netscape Navigator)

et pour des indications générales sur l'utilisation de ces propriétés :
Pompage ou MammouthLand

Il est intéressant de définir une couleur de fond même dans le cas ou l'on définit également une image de fond. Voici pourquoi :

• L'image de fond peut ne pas se charger sur certains navigateurs
• L'image de fond peut mettre du temps à se charger en cas de mauvaise connection. Dans l'intervalle, l'internaute ne verra que la couleur de fond.
• L'image de fond peut ne pas couvrir la totalité du bloc auquel elle est attachée. Les parties non couvertes auront la couleur de fond.

Dans le cas où le bloc auquel vous attribuez image et couleur comporte du texte, vous devez veiller scrupuleusement à maintenir un contraste suffisant entre la couleur du texte et celle du fond afin de ne pas nuire à la lisibilité du texte.

Prenez garde à ne pas attribuer d'images trop "lourdes" (taille trop importante en termes de volume de données) afin de ne pas trop ralentir le chargement de vos pages.

Sur la page "Fast rollover without preload" du site wellestyled, vous trouverez une merveilleuse astuce pour gérer les trois états possibles d'un bouton en lui attribuant une seule image de fond. Cette image doit simplement comporter les trois apparences du bouton et se voit plus ou moins décalée pour les afficher une à une. Voici un exemple d'image :

et le code correspondant :

CSS

#monbouton a {display:block;width:120px;
margin: 1em 0; padding:7px 0 10px 20px;
font: bold 14px/1 sans-serif;
color:#c60;
background: url("../illustrations/3states-button.gif") 0 0 no-repeat;}
#monbouton a:hover {background-position: -157px 0;color: #E9BE75;}
#monbouton a:active {background-position: -314px 0; color:#FFFFFF;}
}

HTML

<span id="monbouton"><a href="#monlien">Bouton exemple</a></span>

Et voici le résultat. Placez votre souris dessus et cliquez pour voir son fonctionnement :

Bouton exemple

Un bouton géré de cette façon sera plus réactif qu'un bouton utilisant 3 images distinctes. Cette astuce est compatible avec tous les navigateurs.

Vous pouvez créer un site en utilisant cette technique pour tous les boutons, y compris les menus de votre site.

 

---