SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
 |
Couleurs et images d'arrière plan |
|
|
 | |
Les mentions décrites ici sont avant tout appropriées aux repères HTML qui créent un paragraphe distinct ou un bloc à savoir par exemple pour h[1-6], p, blockquote, address ou bien pre. Les éléments de blocs sont également formés par des
repères HTML comme div, table, tr, th et td. Même sur <body> les mentions de feuilles de style énumérées ici peuvent être employées - dans ce cas les mentions concernent tout le corps visible du fichier HTML. Il est aussi possible de couvrir des mots distincts de leur propre arrière-plan à l'aide d'éléments incorporés comme span, b, strong etc...
Des mentions d'arrière-plan spécifiques à des éléments tranchent
sur d'éventuelles mentions HTML d'arrière plan concernant la 
Couleur pour l'arrière-plan du fichier HTML ou les Images d'arrière plan (papiers peints) pour tout le fichier. Vous pouvez atteindre de très beaux effets en combinant les mentions des couleurs d'arrière plan et des images d'arrière-plan d'éléments distincts avec les bordures et les espaces intérieurs.
 |
background-color (Couleur d'arrière-plan)Vous pouvez définir une couleur d'arrière plan distincte pour un élément HTML.
<html><head><title>background-color</title>
<style type="text/css">
body { background-color:#E0E0E0; font-weight:bold; font-family:Arial; font-size:120%; }
.boiterose{ background-color:#FFDDDD; padding:6px; margin:0px; }
.rose { background-color:#FFDDDD; }
.boitejaune { background-color:#FFFF66; padding:6px; margin:0px; }
.jaune { background-color:#FFFF66; }
</style>
</head><body>
<h1>Arrière-pensées!</h1>
<p class="boiterose">Sur Internet il y a <span class="jaune">Sydney Bechet</span>.</p>
<p>Ce qui ne veut rien dire.</p>
<p class="boitejaune">Sur minitel règne la <span class="rose">bagatelle</span>.</p>
</body></html>
|
Avec background-color: vous pouvez spécifier une couleur
d'arrière-plan. Une mention de couleur est permise.
Netscape 4.x ne forme pas de véritable bloc de couleur pour les paragraphes de texte de plusieurs lignes, mais au contraire étire la couleur d'arrière-plan à la fin de la ligne seulement jusqu'à la fin du texte là où elle tombe. Pour éviter cela, vous pouvez en plus noter les mentions border:none; et margin:0px; (dans la plupart des cas vous vous en sortez aussi sans margin:0px;).
Si l'espace entre les limites du texte et le bloc de couleur créé par la couleur d'arrière-plan vous paraît trop petit, vous pouvez définir un espace intérieur avec padding comme indiqué dans l'exemple ci-dessus.
|
|
background-image (Image d'arrière-plan)Vous pouvez définir une image d'arrière plan propre à des éléments HTML distincts.
<html><head><title>background-image</title> </head><body style="background-image:url(arriereplan1.gif)"> <div style="background-image:url(arriereplan2.gif); margin:0px; padding:10px"> <h1 align="center" style="color:#FFFFCC">Bienvenue au royaume des textures!</h1> <div style="background-image:url(arriereplan3.jpg); margin:30px; padding:10px"> <h2 align="center" style="color:#804000">Bienvenue au royaume des textures!</h2> </div></div> </body></html> |
Avec background-image:url([URI]): vous pouvez spécifier un
graphique d'arrière plan. Par défaut, ce graphique est répété comme papier peint (Wallpaper), comme la mention d'une image d'arrière plan dans le repère HTML <body>. Le texte et les graphiques référencés apparaissent sur ce graphique d'arrière plan. Comme types de graphiques vous devez utiliser des graphiques GIF ou JPG comme il est usuel en HTML.
Dans l'exemple on part du principe que le fichier graphique se trouve dans le
même répertoire que le fichier HTML. Si le graphique se trouve dans un autre répertoire, vous devez mentionner le chemin relatif ou absolu. Cela fonctionne exactement comme pour incorporer des graphiques en HTML.
Si l'élément pour lequel le graphique d'arrière plan est défini est plus petit en hauteur ou en largeur que le graphique d'arrière-plan, celui-ci sera coupé à la taille de l'élément pour être représenté.
|
|
background-repeat (Effet de répétition)En principe un graphique d'arrière plan est répété dans un effet de papier peint sur tout l'espace qu'il a à sa disposition. Vous pouvez pourtant imposer un autre effet.
<html><head><title>background-repeat</title> </head><body bgcolor="#FFFFFF" text="#000000"> <div style="background-image:url(arriereplan4.jpg); background-repeat:repeat-x; margin:30px; border:thin solid #CCCCFF; font-size:150%"> <p>Le premier passage.<br>Un texte qui passe très facilement<br>à la ligne etc...</p> </div> <div style="background-image:url(arriereplan4.jpg); background-repeat:repeat-y; margin:30px; border:thin solid #CCCCFF; font-size:150%"> <p>Le deuxième passage.<br>Un texte qui passe aussi facilement à la ligne etc...</p> </div> <div style="background-image:url(arriereplan4.jpg); background-repeat:no-repeat; margin:30px; border:thin solid #CCCCFF; font-size:150%"> <p>Le troisième passage.<br>Un texte qui passe aussi facilement à la ligne etc...</p> </div> </body></html> |
Avec background-repeat: vous pouvez contrôler l'effet de
répétition d'un graphique d'arrière plan que vous incorporez avec background-image. Une des données suivantes est permise:
repeat = répéter (réglage par défaut).
repeat-x = ne répéter que sur une "ligne" horizontalement.
repeat-y =ne répéter que sur une "colonne" horizontalement.
no-repeat = ne pas répéter, n'afficher que comme image unique.
Netscape 4.x interprète bien cette mention mais a d'énormes difficultés pour représenter le contenu des éléments.
|
|
background-attachment (Effet de filigrane)Pour des éléments plus longs, une image d'arrière plan bouge avec le texte quand on le fait défiler. Il est pourtant possible d'imposer à l'image d'arrière plan de rester fixe (effet de filigrane).
<html><head><title>background-attachment</title>
<style type="text/css">
body {
background-image:url(arriereplan5.gif); background-repeat:no-repeat;
background-attachment:fixed; padding:0px; }
div.moncorps {
margin-left:100px; margin-top:20px; margin-right:20px; margin-bottom:20px; }
</style>
</head><body>
<div class="moncorps">
<h1>beaucoup de texte<br>Beaucoup de texte à faire défiler!<!--etc...--></h1>
</div>
</body></html>
|
Avec background-attachment: vous pouvez contrôler lors du
défilement la conduite que doit adopter un graphique d'arrière plan que vous incorporez avec background-image. Une des données suivantes est permise:
scroll = défile avec le texte (réglage par défaut).
fixed = l'image d'arrière-plan reste fixe.
L'exemple ci dessus démontre un cas d'application intéressant fait de la combinaison des propriétés background-attachment et background-repeat ainsi que des mentions sur les Marges et espace et les Espaces intérieurs. Un graphique d'arrière-plan est affecté à l'élément body et affiché sans être répété dans le coin supérieur gauche. Tout le contenu du document est placé dans un passage div avec la classe moncorps, dont la marge gauche est définie de telle façon que le texte passe lors du défilement à côté du graphique qui lui reste toujours affiché. Ainsi certains jeux de cadres peuvent être évités!
Netscape 4.x n'interprète pas cette mention.
|
|
background-position (Position d'arrière-plan)Cette mention n'est intéressante que si vous imposez grâce à la mention correspondante à background-repeat que le graphique ne soit affiché qu'une fois. Pour ce cas, il vous est possible de fixer la position d'arrière-plan exacte où le graphique doit être placé dans l'élément HTML.
<html><head><title>background-position</title>
<style type="text/css">
#danse {
background-image:url(arriereplan6.gif); background-repeat:no-repeat;
background-position:30px 20px;
}
</style>
</head><body>
<div id="danse">
<h1>Valse des images!</h1>
<img src="background_foreground.gif" width="321" height="262" border="0" alt="Une image tranparente sur une image d'arrière-plan">
</div>
</body></html>
|
Avec background-position: vous pouvez fixer où le coin supérieur gauche du graphique doit être. La position se rapporte à l'élément HTML pour lequel le graphique est défini. Une mention numérique est permise ainsi que les mentions suivantes:
top = aligné en haut verticalement.
center = centré horizontalement.
middle = au milieu verticalement.
bottom = aligné en bas verticalement.
left = aligné à gauche horizontalement.
right = aligné à droite horizontalement.
Dans l'exemple ci-dessus, l'élément div contient un graphique GIF avec un arrière-plan transparent. Celui-ci sera dans l'exemple affiché sur le graphique d'arrière-plan. Cela ressemble à un graphique mais ce sont deux graphiques différents.
Netscape 4.x n'interprète pas cette mention.
|
|
background (Arrière-plan en général)Cette mention regroupe les différentes mentions possibles suivantes:
background-image (Image d'arrière-plan)
background-repeat (Effet de répétition)
background-attachment (Effet de filigrane)
background-position (Position d'arrière plan)
<html><head><title>background</title> </head><body bgcolor="FFFFFF" text="#000000"> <div style="background:url(arriereplan1.gif) repeat-x;"> <h1 style="font-family:Arial,sans-serif; color:maroon; font-size:60pt">Quoi de neuf</h1> <div style="margin-top:45px; font-size:14pt"> <p>Ici suivent les nouvelles...</p> </div></div> </body></html> |
Avec background: vous pouvez regrouper les mentions pour un
graphique d'arrière plan. Notez les mentions pour le graphique d'arrière plan, l'effet de répétition et l'effet de filigrane ainsi que pour la position séparée par des espaces comme dans l'exemple ci-dessus. L'ordre des différentes mentions n'a pas d'importance. Il n'est pas indispensable de noter quelque chose pour toutes les mentions.
Netscape 4.x interprète bien cette mention mais ce qu'il fait de l'exemple ci-dessus défie malheureusement toute description.
|
| |
 |
Formatage de listes
|
 |
Bordures
|
| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
