background-color: valeur;
Avec cette propriété, vous définirez la couleur de votre fond. Quatre valeurs possibles :
un nom de couleur (white; black; blue; ...)
une valeur hexadécimale (#ffffff; #000000; #0000ff; ...)
un code RGB (rgb(255,255,255); rgb(0,0,0); rgb(0,0,255); ...)
transparent
Les noms de couleurs sont très précis et sont peu nombreux (environ 140).
Une valeur hexadécimale est ce qui permet le plus de possibilités (environ 1,7 millions de couleurs) et le plus répandu comme usage.
Un code RGB donne le même résultat que la précédente, mais est plus pratique pour ceux qui manipulent beaucoup les photos. A noter toutefois que la plupart des logiciels graphiques donne à chaque couleur RGB sa contrepartie hexadécimale.
transparent : comme son nom l'indique, il créera un fond transparent qui permettra de "voir" ce qu'il y a au-dessous.
Exemples :
Code:
background-color: rgb(0,255,255); background-color: #008080; background-color: transparent;
Cette propriété vous permet de définir une image en fond de votre objet ou de votre page. Deux valeurs possibles :
url
none
url est bien évidemment l'url de l'image en question. Vous la placerez entre quotes simples ; les guillemets fonctionnent aussi, mais il est utile de prendre dès le début le réflexe de mettre des quotes simples (apostrophes), pour les cas où vous placerez une commande de ce type dans une classe style="..." qui est déjà délimitée par des guillemets.
none (rien) vous permettra de désactiver sur une page précise l'image de fond que vous avez définie dans la feuille CSS externe.
Note : Lorsque vous définissez une image en fond, définissez aussi une couleur de fond pour le cas où votre image ne s'afficherait pas.
Exemples :
Code:
background-image: url('url-de-votre-image.jpg'); background-image: url('none');
Cette propriété, possible uniquement dans une page (balise <body>), vous permet de définir comment se comportera votre image au défilement de la page. Deux valeurs :
scroll
fixed
scroll est la valeur par défaut. L'image défilera avec votre page.
fixed "fixera" l'image sur votre écran et la page défilera au-dessus.
Exemple :
Code:
background-attachement: fixed;
Cette propriété va définir comment va se répéter l'image de votre fond de page ou d'objet. Valeurs possibles :
repeat
repeat-x
repeat-y
no-repeat
repeat est la valeur par défaut. L'image se répétera autant de fois que nécessaire pour recouvrir tout le fond de votre page ou de votre objet, horizontalement et verticalement.
repeat-x répétera l'image uniquement horizontalement.
repeat-y répétera l'image uniquement verticalement.
no-repeat n'affichera l'image qu'une seule fois.
Exemple :
Code:
background-repeat: no-repeat;
Cette propriété vous permet de positionner très précisément votre image dans votre page-écran. Les coordonnées sont proportionnelles au coin gauche-supérieur et au coin droit-inférieur de la fenêtre de votre navigateur. En principe, pour que cette propriété fonctionne correctement dans tous les navigateurs, la propriété background-attachment doit être sur "fixed". Valeurs possibles :
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
x-pos y-pos
top left positionnera votre image dans le coin supérieur gauche de votre écran.
top center positionnera votre image en haut de votre écran et au centre horizontalement.
top right positionnera votre image dans le coin supérieur droit de votre écran.
center left positionnera votre image au centre verticalement sur le côté gauche de votre écran.
center center positionnera votre image au centre exact de votre écran.
center right positionnera votre image au centre verticalement sur le côté droit de votre écran.
bottom left positionnera votre image dans le coin inférieur gauche de votre écran.
bottom center positionnera votre image en bas de votre écran et au centre horizontalement.
bottom right positionnera votre image dans le coin inférieur droit de votre écran.
Pour l'ensemble de ces valeurs, si vous ne mettez qu'une seule valeur, la seconde sera "center" par défaut.
x% y% positionnera votre image à x% du bord gauche de votre écran et à y% du bord supérieur. Si vous ne mettez qu'une seule valeur, la deuxième sera à 50% par défaut.
x-pos y-pos positionnera votre image à x (unité) du bord gauche et à y (unité) du bord supérieur de votre écran. Si vous ne mettez qu'une seule valeur, la deuxième sera à 50% par défaut. L'unité peut être, entre autre, des centimètres (cm), des millimètres (mm), des pixels (px), des points (pt).
Vous pouvez mixer les valeurs de pourcentage et de longueur.
Exemples :
Code:
background-position: center center; background-position: 20% 50%; background-position: 200px 50px; background-position: 50% 2cm;
Code:
body { background-color: white; background-image: url('url-de-votre-image.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; }
Code:
<body style="background-image: url('none')">