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;

Formation 36

Que sont le XHTML et le CSS ?Structure d'une page HTMLLes balises d?entête, head, title, meta...Les balises de corps de page, entre les balises bodyAjouter une image dans la page : balise img (type inline ou block) Insérer des liens : balise a (type inline)Afficher une listeConstruire des tableaux - balise tableCréer des formulaires Les balises universelles : div et spanOù placer le code CSS ?Comment modifier une balise en particulier ?Modifier l'aspect du texteGestion de l'arrière-plan (coloré ou avec des images)Mise en forme du texte : word-spacing , letter-spacing, vertical-align, text-alignMise en forme des balises de type blockLes borduresMise en forme des listesPositionner des blocs HTML à l'écranDébordement d'un bloc HTML : overflowChanger l'aspect de la souris : cursorCas pratique : mise en page à 2 ou 3 colonnesLargeur de site fixe ou variable ?Insertion d'une animation flashInsertion d'une vidéoInsérer un fichier audio


Pour plus d'informations, vous pouvez nous contacter par mail.

 

Tutos et cours en ligne

Ergonomie et accessibilit�R�f�rencementHTML / CSS