Propriétés de fond des feuilles de style en cascade (CSS) - Mannequins

Avec les feuilles de style en cascade (CSS) propriétés à un certain nombre d'objets différents sur une page Web, y compris la page entière, un calque particulier, une table, une cellule de tableau, et même du texte.

background-color: une couleur d'arrière-plan peut être appliquée à la plupart des objets d'une page, notamment le texte, les tableaux, les cellules de tableau, les calques et le corps d'une page en utilisant une valeur hexadécimale. Lorsque vous spécifiez une couleur hexadécimale pour n'importe quel style, n'oubliez pas d'ajouter le symbole numérique (#) avant la valeur hexadécimale, comme dans # cc9900, pour obtenir les meilleurs résultats d'affichage du navigateur.

p {background-color: # 33ff00;}

background-image: Vous pouvez appliquer des images, comme une couleur d'arrière-plan, à l'arrière-plan de nombreux objets sur une page Web, notamment le corps d'une page, des tables, des cellules de tableau et des calques. Vous pouvez contrôler la manière dont les mosaïques d'images (répétitions) en utilisant l'attribut repeat.

. mylayer {background-image: url (images / car.gif);}

background-repeat: L'attribut repeat indique à un navigateur comment l'image d'arrière-plan doit être répétée dans la zone qu'il remplit. Par défaut, et sauf indication contraire, tous les arrière-plans seront placés verticalement et horizontalement pour remplir tout l'espace d'arrière-plan de la balise stylisée ou de l'objet.

body {background-image: url (images / zigzag.gif); background-repeat: repeat-x;}

L'attribut repeat a quatre variables:

• repeat: Cette option est la même que la configuration par défaut pour les images d'arrière-plan et colle l'image d'arrière-plan horizontalement et verticalement.

• repeat-x: utilisez cette option lorsque vous souhaitez que l'image d'arrière-plan ne soit placée que le long de l'axe horizontal. Si vous le souhaitez, utilisez-le conjointement avec l'attribut horizontale et / ou verticale de l'arrière-plan.

• repeat-y: Utilisez cette option lorsque vous voulez que l'image d'arrière-plan ne colle que le long de l'axe vertical. Si vous le souhaitez, utilisez-le conjointement avec l'attribut horizontale et / ou verticale de l'arrière-plan.

• no-repeat: Ce réglage affiche l'image d'arrière-plan comme une image statique unique sans répétition dans les deux sens.

background-attachment: cet attribut fait référence à la façon dont l'image d'arrière-plan interagit avec le contenu situé au-dessus. L'image d'arrière-plan peut se comporter de trois manières différentes: scroll, fixed et inherit, mais les trois ne sont pas toujours pris en charge par tous les navigateurs. Assurez-vous de tester l'option choisie dans différents navigateurs et navigateurs sur Mac et PC. plates-formes.

body {background-image: url (images / biodiesel.gif); background-attachment: fixé; background-repeat: repeat-y;}

Voici une explication des différents styles de pièces jointes en arrière-plan:

• scroll: Ceci est l'option par défaut pour la façon dont l'image d'arrière-plan est attachée à la page. attribut est spécifié ou non spécifié dans le CSS. Avec cette option, l'image d'arrière-plan défile avec tout texte et autres objets sur la page.

• fixed: L'attribut fixed maintient l'image d'arrière-plan fixée à la fenêtre du navigateur pendant que le texte et les autres objets de la page défilent.

• inherit: lorsque vous spécifiez cette option, l'image d'arrière-plan hérite de la règle de pièce jointe, qu'elle soit scroll ou fixe, à partir de son conteneur parent, comme avec une cellule de tableau dans une table.

background-position (X): Définit l'attribut horizontal background-position pour contrôler où, dans la fenêtre du navigateur, l'image d'arrière-plan s'affiche et se répète. Choisissez gauche, centre ou droite ou tapez n'importe quelle valeur en px (pixels), pc (picas), pt (points), en (pouces), mm (millimètres), cm (centimètres), em (ems), ex (exs), ou% (pourcentage).

p {background-image: url (images / recycle.gif); background-repeat: répète-x; background-position: left;}

background-position (Y): Définit l'attribut vertical background-position pour contrôler où, dans la fenêtre du navigateur, l'image d'arrière-plan s'affiche et se répète. Choisissez haut, centre ou bas ou entrez n'importe quelle valeur en px (pixels), pc (picas), pt (points), en (pouces), mm (millimètres), cm (centimètres), em (ems), ex (exs), ou% (pourcentage).

p {background-image: url (images / gogreen.png); background-repeat: répète-y; background-position: center;}

Lorsque les deux positions d'arrière-plan horizontal et vertical doivent être spécifiées dans le CSS, les lister ensemble séparées par un espace:

p {background-image: url (images / earthsafe.jpg) background-repeat: répète-x; background-position: left center;}

La position horizontale précède toujours la position verticale lorsque les deux sont combinés. Si cet ordre n'est pas suivi, l'élément peut ne pas s'afficher correctement, ce qui entraîne des problèmes d'affichage inattendus lorsqu'il est affiché dans différents navigateurs.