Comment positionner des graphiques sur des sites CSS3 - des nuls

Essentiellement, pour positionner les graphiques dans les sites CSS3, vous utilisez la combinaison des propriétés gauche, droite, haut et bas pour fournir un positionnement de base. Le réglage de la position implique l'utilisation des propriétés margin-left, margin-right, margin-top et margin-bottom. Pour vous assurer que l'image reste à un endroit, vous définissez normalement la propriété position sur absolute. Tout le positionnement est relatif à la taille de l'image, que vous définissez en utilisant les propriétés height et width.

Les images d'arrière-plan ont également une fonctionnalité de positionnement. Vous pouvez également contrôler la position, la marge et la taille de l'image d'arrière-plan. La procédure suivante fournit un exemple de la façon dont vous pouvez modifier l'exemple SingleImage pour placer une seule copie de l'image au centre de la page (et la conserver là, peu importe le mode de défilement de la page).

1. Ouvrez l'image unique. Fichier CSS.

2. Modifiez le style de corps pour que l'image soit fixée au centre, comme illustré ici.

   body {background-image: url ("CuteCat.jpg"); couleur de fond: SaddleBrown; couleur: SeaGreen; taille de police: x-large; texte-ombre: 1px 1px Jaune; background-position: centre; background-attachment: fixed;}
   

   La propriété background-position permet de définir le placement de la copie primaire d'une image d'arrière-plan. Le réglage par défaut place l'image dans le coin supérieur gauche, ce qui peut ne pas être très agréable à l'œil.

   La propriété background-attachment définit comment cette image est attachée à l'arrière-plan du navigateur. La définition de cette valeur sur fixed signifie que l'image reste au même emplacement même lorsque l'utilisateur redimensionne l'affichage ou fait défiler le contenu.

3. Enregistrez le fichier CSS en tant que BackgroundPosition. CSS.

4. Ouvrez l'image unique. Fichier HTML

5. Modifiez la balise pour qu'elle ressemble à ceci:

6. Enregistrez le fichier HTML en tant que BackgroundPosition. HTML

7. Chargez la page BackgroundPosition.

   Vous voyez l'arrière-plan. Notez que l'image initiale est maintenant centrée et que les copies en émanent.