Accueil  | Internet | Informatique | Créer sa page perso | Glossaire | Menu | CSS
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