La gestion des fonds en CSS

Raphaël GIOVANNETTI — P.A.S.T. — Département Info-Com — Université Paul Valéry Montpellier III

La gestion des fonds en CSS s’effectue grâce à la propriété background. Cette propriété est une propriété concaténée qui permet de gérer l’ensemble des paramètres d’un fond de page. C’est l’utilisation de cette propriété que nous privilégierons.

Propriétés de fond

Sert à Propriété Valeur Exemple NB
Gérer un fond global background Couleur + image de fond + répétition + positionnement 
background:#ffcc00 url(images.jpg)
no-repeat top left;

Permet de regrouper les valeurs d’autres propriétés CSS (couleur, image, positionnement…).

Il n’est pas nécessaire de tout préciser, mais il faut respecter l’ordre : couleur / image / répétition / position.

Couleur de fond background-color Code couleur / nom d’une couleur 
background-color :#ffcc00 ;
background-color:pink;
 Elle se positionne toujours en dessous de l’image.
Image de fond background-image url(fichier.ext) 
background-image:url(images.jpg);

Intègre une image de fond. fichier.ext est remplacé par le nom du fichier.

Se place au-dessus de la couleur de fond.
Répétition du fond background-repeat repeat / no-repeat / repeat-x / repeat-y 
background-repeat :no-repeat
 Par défaut, les fonds se répètent horizontalement et verticalement (principe mosaïque).
Positionner une image de fond background-position Positionnement horizontal puis vertical, en pixel ou via le nom d’un côté 
background-position:left top ;
background-position:400px 200px

Détermine comment l’image est positionnée horizontalement et verticalement dans le block. Il est indispensable de spécifier les 2 côtés.

En pixels, on raisonne à partir du coin supérieur gauche (utile dans certains cas très spécifiques).

Fixer le fond background-attachment fixed 
background-attachment:fixed;
 Permet de fixer le fond : même si l’on se déplace dans la page, l’élément conservera sa place.
Adapter l’image à l’élément background-size cover / contain / dimension 
background-size:contain;
background-size:cover;

Propriété CSS3 (historiquement pas reconnue partout selon navigateurs).

  • cover couvre toute la surface sans déformer (peut rogner l’image).
  • contain garde l’image entière sans déformer (peut créer des zones vides).

Dans les 2 cas : risque d’agrandissement de l’image → baisse de qualité possible.

Plusieurs fonds de pages (CSS3)

Il s’agit d’une propriété CSS3 qui rend possible l’affichage de plusieurs images en arrière-plan dans un même élément en cumulant les valeurs dans les propriétés de fond.

La première valeur énumérée sera l’image de premier plan. Il faut respecter le nombre de valeurs déclarées dans chaque propriété.

Ex :

background-image: url("logo.png"), url("mouton.jpg");
background-position: right bottom, left top;
background-repeat: no-repeat, no-repeat;