Généralités
Pas de chichi, on oublie backround-image et background-color et on utilise plus simplement background.
Tout élément de type block peut recevoir un fond avec la propriété background, cette propriété n'est en aucun cas réservée
au body!
Une couleur de fond
Il suffit de préciser une couleur avec l'une des méthodes suivantes:
- en hexadécimal par #FF0000
- en rgb par rgb(255,0,0)
- en rgba par rgba(255,0,0,1)
- en hsl par hsl(45,211,143)
- en hsla par hsla(45,211,143,1)
- avec le nom de la couleur par red
Démo
<style>
.fond1 {
background:rgba(255,200,200);
}
</style>
</head>
<body>
<div class="fond1">Une couleur de fond...</div>
</body>
Une image de fond en mosaïque
Il suffit de préciser l'adresse d'une image que l'on peut répétée pour former une mosaïque. Celle-ci est répétée selon X et Y.
!!! Le dossier de référence à partir duquel on construit l'adresse de l'image est le dossier qui contient le fichier de styles !!!
Démo
<style>
body {
background:url(../../image/back.jpg);
}
</style>
</head>
<body>
<p>
En voilà un beau fond en mosaïque...
</p>
</body>
Une image de fond non répétée
Voilà plus compliqué, il s'agit de charger une image, d'empêcher sa répétion et de la positionner sur la page.
Dans l'exemple j'utilise la forme condensée (usage recommandé!), celle-ci peut être éclatée en plusieurs styles.
- l'adresse de l'image
- le choix de la répétition (repeat, no-repeat, repeat-x, repeat-y)
- le positionnement: il se donne par deux valeurs
- numériques en px, qui donnent respectivement la position selon X et Y (par exemple 20px 30px)
- numériques en %, qui donnent respectivement la position selon X et Y (par exemple 5% 10*)
- alphabétiques (valeurs autorisées: left, top, right, bottom, center)
Démo
<style>
body {
background:url(../../image/proudhon.jpg) no-repeat left top;
}
</style>
</head>
<body>
<p>Pierre-Joseph Proudhon, le papa de l'anarchie.</p>
</body>
Une image de fond non répétée sur une couleur de fond
On a 4 paramètres pour background:
- la couleur de fond (méthode au choix)
- l'adresse de l'image
- la répétition
- le positionnement
Démo
<style>
body {
background:rgba(220,220,220,1) url(../../image/proudhon.jpg) no-repeat right bottom;
color:red;
</style>
</head>
<body>
<p>Pierre-Joseph Proudhon, le papa de l'anarchie.</p>
</body>
Une image de fond non répétée sur une couleur de fond qui suit ou pas le srolling
On a 5 paramètres pour background dont le quatrième précise si le fond est fixed ou scroll.
On a 5 paramètres pour background:
- la couleur de fond (méthode au choix)
- l'adresse de l'image
- la répétition
- fixé ou avec scrolling (fixed ou scroll)
- le positionnement
Démo
<style>
body {
width:400px;
height:1500px;
overflow:scroll;
background:rgba(220,220,220,1) url(../../image/proudhon.jpg) no-repeat fixed left top;
}
</style>
</head>
<body>
<p>Pierre-Joseph Proudhon, le papa de l'anarchie...</p>
</body>
Un fond qui s'adapte à la taille de la fenêtre
Certains sites affichent une image de fond qui s'adapte au redimensionnement de la fenêtre du navigateur,
proportionnellement, sans la déformer.
Préparation de l'image de fond
L'image de fond doit respecter les règles suivantes :
- un format rectangulaire: 2000px * 1300px (par exemple)
- le poids de l'image doit être optimisé afin de garantir un temps de chargement correct
On suit la démarche suivanre:
- l'image est chargée, on ne veut pas de répétition, le fond est fixé, elle est centrée verticalement et horizontalement
- on place background-size à la valeur cover ou auto (il existe d'autres valeurs possibles!)
Remarque:
cover permet d'adapter l'image à la fenêtre en toutes circonstances.
auto permet de garder la taille initiale de l'image et d'ensuite l'adapter à la taille de la fenêtre.
Démo
<style>
body {
background: url(../../image/cervin.jpg) no-repeat fixed center center ;
background-size: cover;
}
p {
color:white;
}
</style>
</head>
<body>
<p>
La redimension n'a pas d'effet "dévastateur", l'image garde des relations
parfaites entre sa hauteur et sa largeur...
</p>
</body>
Plusieurs images de fond
Indispensable à votre survie sur le net, outil de mise en page particulièrement pratique.
La propriété background accepte plusieurs définitions de fond, elles sont séparées par des virgules.
Un premier exemple
Un grand classique, on veut une image aux 4 coins de la page.
Démo
<style>
body {
background:url(../../image/isa.png) no-repeat left top,
url(../../image/ferb.png) no-repeat right top,
url(../../image/phineas.jpg) no-repeat left bottom,
url(../../image/doof.jpg) no-repeat right bottom;
}
p {
margin:250px;
}
</style>
</head>
<body>
<p>C'est beau hein ?</p>
</body>
Un deuxième exemple
Le grand classique précédent délicatement posé sur fond gris.
Démo
<style>
body {
background:url(../../image/isa.png) no-repeat left top,
url(../../image/ferb.png) no-repeat right top,
url(../../image/phineas.jpg) no-repeat left bottom,
url(../../image/doof.jpg) no-repeat right bottom,
rgba(230,230,230,1);
}
p {
margin:250px;
}
</style>
</head>
<body>
<p>C'est beau hein ?</p>
</body>
Un troisième exemple
Le grand classique précédent délicatement posé sur fond mozaïque.
Démo
<style>
body {
background:url(../../image/isa.png) no-repeat left top,
url(../../image/ferb.png) no-repeat right top,
url(../../image/phineas.jpg) no-repeat left bottom,
url(../../image/doof.jpg) no-repeat right bottom,
url(../../image/back.jpg);
}
p {
margin:250px;
}
</style>
</head>
<body>
<p>C'est beau hein ?</p>
</body>
En résumé
On utilise préférentiellement l'écriture condensée, chaque paramètre est optionnel mais l'ordre dans lesquels ils sont écrits est important:
- la couleur de fond
- l'url de l'image de fond
- la répétition et son sens
- l'attachment, c'est scroll par défaut
- la position, elle est donnée par 2 valeurs
Quiz
Les images de fond 1
Les images de fond 2