<hier>WEBLOG</hier>
Lundi 14 février 2005 | link |
background-image
Mettre une image de fond dans une page web est un exercice très répandu. Avec tout éditeur de page html, l'option classique est de générer un code du type : <body background="images/image_de_fond.png">, auquel on peut même ajouter bgproperties="fixed" qui rend fixe l'image de fond ; mais cet attribut ne fonctionne qu'avec MSIE.
Avec les feuilles de style on peut obtenir beaucoup plus !
Petits avertissements préliminaires :
- Une image de fond doit être légère. Comprenez par là qu'une image de 10 ko c'est déjà beaucoup : c'est long à charger et cela peut provoquer des problèmes d'affichage.
- Attention aux difficultés de lecture qu'une image de fond trop contrastée peut provoquer.
- Attention aussi à prendre une couleur de fond différente de celle de la police de caractère, car en attendant que l'image de fond se charge, on n'y verra que pouic.
Pour illustrer tout cela, visionnez ce mauvais exemple : la photo fait 53 ko ; la couleur utilisée, pour la police de caractère et le fond, est blanche.
Code de base
L'image de fond se déclare en général pour la balise body (corps de page), mais on peut aussi l'appliquer à un bloc (<div></div>), ou un titre (<hx></hx>), une citation (<blockquote></blockquote>), etc.
Pour le corps de page, la syntaxe CSS de base sera celle-ci :
body {
color:black;
background-color:white;
background-image:url(images/image_de_fond.png);
}
color renseigne la couleur de la police de caractère, background-color est de la couleur de fond de page ; background-image:url() est bien sûr l'adresse de l'image choisie pour le fond de page.
Sans plus de renseignements, l'image de fond apparaît en mosaïque et défile en même temps que le texte.
Fond de page fixe
Pour que le fond de page devienne fixe, on rajoutera dans le code :
background-attachment:fixed;
Positionner l'image
On peut aussi empêcher la mosaïque et positionner l'image dans une partie très précise de l'écran.
Par défaut, l'image se positionne en haut à gauche de l'écran :
body {
color:black;
background-color:white;
background-image:url(images/image_de_fond.png);
background-repeat:no-repeat;
}
Exemple positionnement 1
Si l'on veut qu'elle se place en haut à droite, on rajoutera le code :
background-position:right top;
ou :
background-position:100% 0%;
Exemple positionnement 2
Pour une position au centre de la page, cela donnera :
background-position:center center;
ou :
background-position:50% 50%;
Exemple positionnement 3
Pour une position en bas à droite :
background-position:right bottom;
ou :
background-position:100% 100%;
Remarques
background-repeataccepte 4 attributs :no-repeat;repeat-xpour une répétition de l'image uniquement horizontale ;repeat-ypour une répétition uniquement verticale ; etrepeatpour la mozaïque complète.- Vous aurez noté, bien sûr, que les pourcentages dans le
background-positionoffrent plus de latitude que les attributs[right|center|left] [top|center|bottom].
Et on pourrait même ajouter que dans cette page, l'ordinateur en haut à gauche qui reste fixe est une image de fond définie dans la feuille de style pour le body... bon exemple!!
denis - 16-02-2005 - 14:29
Merci Billal :-)
Oui, effectivement Denis, la photo de l'ordinateur est un parfait exemple. Celle du panorama de la montagne juste au-dessus des commentaires aussi. C'est un fond de page : j'ai choisi cette option pour que ce soit l'image qui s'adapte et non la fenêtre (ça évite les ascenceurs horizontaux). Bien sûr, un petit écran voit moins de paysage qu'un grand, mais ce n'est pas grave.
Pour voir ce panorama en entier :
http://mammouthland.free.fr/jardin/village/nature/montagne/images/panorama2.jpg
Pascale - 16-02-2005 - 21:55
Ouah très bien tout ça même si ça me sert pas vu que j'utilise le CSS depuis des lustres :) mais c'est clair concis précis ! Un truc que j'aime beaucoup (rien à voir avec les arrière-plans tu me diras) c'est les position:fixed; - IE connait pas - qui remplacent les frames de façon tout à fait impressionnante... hé hé ...
ClemSat - 17-02-2005 - 21:10
Ah bon,il faut ça aussi IE ? ;-)
Etonnant que nous n'ayons pas le droit à ça aussi à KL :D
Pascale - 18-02-2005 - 10:05
C'est trop cooooooooooooooooooool !!!!!!
Encore ! Encore ! des sites comme ca !
Beuls - 19-02-2005 - 18:14
tres biens tes explications et surtout le petit exemple tout de suite en dessous c 'est encore plus cool
hasta pronro
tito elcubano - 22-02-2005 - 15:21
trés beau site, je vais essayer de convertir des à present mes tableau super lourd en petit fichier CSS... je connaissait le basique, mais pas tout ça, merci, c'est claire, nette.. rien à redire sauf peut être des fautes de frappes (j'en ai vu deux...) mais je n'ai moi même rien à dire à ce sujet :D
Sailx - 25-02-2005 - 19:15
quel plaisir!
neaufit - 10-03-2005 - 22:13
Merci à tous ! :-)
Pascale - 13-03-2005 - 20:23
perso :
de pascal à pascale,je me demandais pourquoi l'esprit de ce site me plaisais tant, la rèponse est : MSMA
++
neaufit - 15-03-2005 - 21:30
Merci beaucoup pour ce site clair, net, et bourré de choses intéressantes.
Quelle joie pour les novices comme moi !
:o))
JRV - 25-03-2005 - 00:56
Mardi 24 décembre 2024
merci pour ce site magnifique ça fait plaisir de trouve des sites comme ça mais il ya pas trop en plus si tu veux savoir des trucs forte tu doit pays.
merci encore :)
billal - 15-02-2005 - 18:54