|
 Accueil | Internet |
Informatique | Créer
sa page perso | Glossaire | Menu | CSS | Sonnerie portable
www.aidenet.com
|
C S S
Feuilles de style
|
Propriété background-image
"image en fond de page"
|
Page - 08b
|
Image dans un fond de page
La propriété background-image
sert à placer une image en fond de la page ou en fond de texte d'un ou
plusieurs éléments. on dit aussi qu'elle sert à spécifier
"l'image d'arrière-plan". En même temps qu'une image,
il est fortement recommandé aussi de spécifier une couleur normale
d'arrière-plan, qui sera utilisée en remplacement d'une image
indisponible.
body { background-image: url("aimages/v178.jpg"
}
Dans ce fichier j'ai placé une image "v178.jpg" à partir
de mon sous-dossier "aimages", qui correspond à l'image de
fond de cette page.
Image de fond de page
Songez en choisissant une image pour votre fond de page à son poidsqui
va influencer la durée de chargement chez votre visiteur. Plus léger
vous choisissez mieux ça ira: 5 Ko c'est déjà pas mal même
si avec l'ADSL ou autre ça roule mieux! L'idéal quand le contenu
le supporte c'est de garder la même image pour le plus grand nombre de
pages possibles et bien sûr en conformité avec votre contenu. D'une
part une fois chargée elle est disponible immédiatement pour la
suite des fichiers et d'autre part votre site ne ressemble pas à une
bande dessinée ou un sapin de Noël avec en plus peut-être
des gifs animés qui s'agitent un peu partout.
Surtout n'oubliez pas d'harmoniser les couleurs de l'image
de fond de page avec votre texte, afin que ce dernier reste bien lisible.
Code 1 dans HEAD
</TITLE>
<style type="text/css">
body
{
background-image: url("aimages/v178.jpg")
background-color: #FFFFFF ;
}
.boite
{
background-image: url("aimages/v371.jpg") ;
border: solid 2px #990000 ;
margin-left: 250px ;
width: 200px ;
height: 150px ;
background-color:#FFFFFF ;
}
</style>
<BODY BGCOLOR="#FFFFFF" >
Résultat exemple 1
Il est sous vos yeux avec ce fond de page clair de 3
Ko.
Remarque
Naturellement vous avez indiqué le chemin d'accès de cette image
qui se trouve théoriquement dans votre répertoire local et attention
: dans le code n'oubliez pas les guillemets ni les parenthèses et pas
d'espace entre "url" et la parenthèse qui suit.
N'oubliez pas d'incorporer background-color (ici #FFFFFF) dans votre
code CSS et aussi dans la ligne BODY en HTML, pour fixer une couleur approchante
à celle du fond d'image, au cas où le navigateur du visiteur par
exemple n'accepterait pas le CSS ou n'arriverait pas à charger votre
image de fond. Pensez au résultat imprévu que donnerait par exemple
votre beau contenu préparé avec une couleur d'image noire et un
texte blanc, qui se retrouverait sur un fond blanc avec le texte devenu forcément
invisible.
Lorsque l'image définie est plus grande que la page, elle a les
bordures "rognées", alors que si elle est plus petite elle
est répétée jusqu'à remplir la page en partant du
coin supérieur gauche jusqu'au bord inférieur droit.
Mais égalemment lorsque vous définissez une image d'arrière
plan, il est possible d'en déterminer sa répétition ou
encore son défilement suivant des propriétés qui sont abordées
pages suivcantes.
Fond de page pour élément dans la page
Code 2 dans BODY
<P align="center" class="boite">Fond
de page avec une image, dans un élément (boîte)
<br> qui est symbolisé ici par un léger cadre de
2px marron.(avec "border")</P>
Résultat exemple 2
Fond de page avec une image, dans un élément
(boîte)
qui est symbolisé ici par un léger cadre de 2px marron.(avec "border")
Sommaire CSS ... @ ... Répétition
d'une image horizontalement
Tous droits réservés
© 1997- 2006. www. aidenet.com
 
|
