Formation 36

Gestion de l'arrière-plan (coloré ou avec des images)

Couleur d’arrière-plan : background-color

Cette propriété CSS permet d’appliquer une couleur d’arrière plan à une balise CSS.

 

Vous pouvez également indiquer la couleur avec :

  • le code hexadécimal d’une couleur sous la forme #aabbcc, où aa indique la proportion de rouge, bb la proportion de vert et cc la proportion de bleu

  • le code d’une couleur en notation RGB sous la forme rgb(aaa,bbb,ccc)

  • le nom de la couleur en anglais. Cette méthode fonctionne uniquement pour les couleurs les plus fréquentes, parmi lesquelles : white, black, blue, green, red, purple, pink, yellow, silver, gray, lime, ...

background-color: #570FA9;
background-color: rgb(255,63,120);
background-color: red;

Image d’arrière-plan : background-image

La propriété CSS background-image vous permet d’utiliser une image comme arrière plan. Les formats graphiques les plus couramment utilisés sont jpg, gif et png.

Vérifiez toujours que les couleurs et les motifs de votre arrière-plan ne gênent pas la lecture.

Vous avez la possibilité d’indiquer le chemin d'accès relatif ou le chemin d’accès absolu :

background-image: url(“dossier/fichier.gif”);
background-image: url(“http://www.site.com/dossier/fichier.gif”);

En notation relative, pour indiquer que le fichier cible se trouve dans un dossier parent, on utilise la notation symbolique ../ (qui revient à utiliser le bouton “ dossier parent ” quand on parcoure le disque dur dans l’explorateur Windows).
Exemple : voici l’arborescence d’un site :
/dossier1
fichier1.jpg
fichier2.jpg
/dossier2
style.css
Pour définir le chemin d’accès relatif à fichier1.jpg, en partant de style.css, on notera :
background-image: url(“ ../dossier1/fichier1.jpg ”);

Répétition horizontale ou verticale d'un motif : background-repeat

Une image en arrière-plan peut apparaître une fois, ou être répétée à l’infinie verticalement et/ou horizontalement. On parle alors de “ papier peint ”.

En CSS, on a le choix entre :

  • pas de répétition (no-repeat)

  • répéter horizontalement et verticalement (repeat) ; c’est le mode par défaut

  • répéter selon l'axe x, c’est à dire horizontalement (repeat-x)

  • répéter selon l'axe y, c’est à dire verticalement (repeat-y)

background-repeat: repeat-x;

Mode d'affichage de l'arrière plan : background-attachment

Cette propriété permet d’attacher l’image d’arrière-plan à la page (mode scroll) ; dans ce cas, lorsqu’on descend plus bas dans la page, l’image d’arrière bouge en même temps que le reste de la page.

Il est aussi possible de fixer l’arrière-plan par rapport à l’écran (fixed) : lorsqu’on descend plus bas dans la page, le contenu de la page bouge mais l’image d’arrière plan reste immobile.

Par défaut, lorsqu’on ne précise pas, l’arrière-plan suit le reste de la page (mode scroll).

background-attachment: fixed;

Le mode dans lequel l’arrière-plan reste fixe à l’écran lorsque l’on navigue dans la page (mode fixed) peut être très fatiguant pour les yeux et gêner la lecture. A éviter...

Position horizontale et verticale de l'arrière plan : background-position

Vous n’êtes pas obligé de faire débuter votre arrière-plan dans le coin supérieur gauche de la page ou d’un bloc HTML. La propriété background-position vous permet de placer votre image où vous le souhaitez.

Vous pouvez indiquer sa position (en pixels, en % ...) par rapport au coin en haut à gauche de la page ou du bloc :

background-position: 20px 10px;

 

Une autre méthode consiste à positionner l’image horizontalement puis verticalement en utilisant des mots clés suivants :

  • horizontalement : gauche (left), centrer (center), droite (right)

  • verticalement : haut (top), centrer (middle), bas (bottom)

 

Par exemple, dans le code CSS, pour positionner l’image d’arrière-plan en haut à droite, vous mettrez :

background-position: top right;

Propriété globale d'arrière-plan : background

Il existe une propriété CSS globale qui permet de gérer en une seule ligne les caractéristiques de l’arrière-plan ; c’est la propriété background.

Vous devez préciser au moins l’un des attributs suivants, dans l’ordre qui vous convient : background-image, background-repeat, background-attachment et background-position.

background: url(“ dossier/fichier.jpg ”) repeat-x scroll bottom center;



Pour plus d'informations, vous pouvez nous contacter par mail ou aux coordonnées suivantes :


Contacter CS Formation

 

Tutos et cours en ligne

HTML / CSS