|
 Accueil | Internet |
Informatique | Créer
sa page perso | Glossaire | Menu | CSS | Sonnerie portable
www.aidenet.com
|
C S S
Feuilles de style
|
background-attachment-y
image verticale fixe
|
Page - 08da
|
Image fixe verticalement y
Cette propriété "bacground-attachment"
indique si l'image est fixe quand vous faites défiler le contenu du fichier
avec la barre de scroll. Mais si elle se répète verticalement,
alors elle demeure visible tout en restant immobile.
Valeurs
scroll L'image défile
avec la page. Paramètre par défaut.
* fixed L'image reste fixe à son emplacement
lors du défilement de la page.
repeat L'image d'arrière-plan se répète à la
fois horizontalement et verticalement.
no-repeat L'image d'arrière-plan n'est affichée qu'une
seule fois.
repeat-x
L'image d'arrière-plan ne se répète qu'horizontalement.
* repeat-y
L'image d'arrière-plan ne se répète que verticalement.
* dans cette page
Code dans HEAD
</TITLE>
<style type="text/css">
body
{
font-family: arial, verdana, sans-serif ; font-size : 10pt ; color:black ;
background-image:url("aimages/v224.gif") ;
background-repeat : repeat-y;
background-attachment:fixed ;
margin: 0cm 2mm 0cm 1cm ; }
}
</style>
Résultat :
Il est sous vos yeux, et cette présentation peut être intéressante
pour placer un bandeau vertical à gauche d'un document. ... naturellement
vous pouvez aussi en fixer la position dans la page avec background-position:
center; par exemple.
Très important
Pour compenser le décalage provoqué par l'insertion de cette
bande verticale, il faut à seule fin de préserver la lisibilité
du contenu, déplacer son ensemble vers la droite. Pour y parvenir j'ai
utilisé une propriété du CSS, "margin"
qui sera vue plus tard :
margin: 0cm 2mm 0cm 1cm; (
à 2 mm du bord droit de la page et 1 cm du bord gauche)
Un petit travail minutieux de mise en page s'impose avant d'expédier
sur le Web.
Remarque
Pour le chemin d'accès de l'image, attention
: dans le code pas d'espace entre "url" et la parenthèse qui suit et
n'oubliez pas les guillemets ni les parenthèses.
Sommaire CSS ... @ ... Background-position
image
Tous droits réservés
© 1997- 2006. www. aidenet.com
 
|
