Accueil 
Ce dont vous avez besoin Model à télécharger Personnaliser l'arrière-plan.
Personnaliser l'arrière-plan
Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.
| Résumé de la matière | Description |
|---|---|
| Couleur comme arrière-plan | Aujourd'hui avec les écrans panoramiques... |
| Un motif comme arrière-plan | Vous pouvez insérer un dégradé de couleur... |
| Un calque comme arrière-plan | Vous pouvez aussi insérer un calque ou une image... |
| L'arrière-plan pour <body> | Il faut essentiellement suivre les mêmes étapes... |
| Optimiser son CSS | Dans notre modèle nous avons utilisé trois lignes pour l'arrière-plan... |
Une couleur en arrière-plan
Aujourd'hui avec les écrans panoramiques (wildscreen) et les résolutions d'écran que permettent les cartes graphiques, il est préférable que le conteneur principal <body>, soit de largeur fixe pour éviter que le texte ne s'étire pas sur de longues lignes, ce qui pourrait provoquer un rendu non désirer et franchement déplaisent pour le lecteur.
Puisque la balise <html> occupe 100 % de la largeur de l'écran, quelle que soit sa largeur ou sa résolution et que <body> n'a que 800 pixels, il y aura par défaut, une bordure blanche à droite de la page pour compenser l'espace vacant (si vous avez téléchargé le modèle, la bordure blanche a été remplacée par deux bordures grises (valeur #444444) de chaque côté de <body> qui a été centré). Heureusement, vous pouvez remplacer la couleur de fond par une autre couleur, une texture ou un motif.
Trouvez background-color (ligne 6) dans notre modèle CSS. La valeur hexadécimale indique que l'arrière-plan est gris (#444444). Pour personnaliser la couleur, choisissez une couleur ici. Puis, par copie-coller, insérer le code alpha numérique à la place de 444.
 |
Deux valeurs hexadécimales comprises entre 00 et ff sont donnés aux couleurs fondamentales rouge, vert et bleu (rrvvbb). Le blanc donnera ffffff et le noir 000000. Si les paires sont identiques, vous
avez la possibilité de réduire la valeur. Remplacé #ffffff par #fff ou #000000 par #000 ou encore #00ccff par #0cf (le symbole
# indique au navigateur que vous utilisez une valeur hexadécimale). Dans notre modèle, #444444 a été remplacé par #444. Bien que les navigateurs supportent de plus en plus de couleurs, celle que vous aurez choisie ne sera peut-être pas prise en compte. Dans ce cas, le navigateur appliquera la couleur le plus près. |
|---|
Un motif comme arrière-plan
Vous pouvez insérer un dégradé de couleur, une texture ou même une image comme arrière-plan. Sachez cependant que plus il y a d'images, de calque ou de texture, plus le poids de la page augmentera, elle sera donc plus longue à télécharger.
Tout en vous assurant que le motif n'attire trop l'attention, utilisez le style « tapisserie » c'est-à-dire que le motif se répète dans toutes les directions en se complètent mutuellement pour donner l'impression qu'il s’agit d'un seul calque.
Faites un clic droit sur le motif pour le télécharger puis enregistrer l'image sous..., sauvegardé-là dans votre dossier images de votre site. Remplacer son nom par bg.png (.png étant le format de l'image).
Copier et remplacer les lignes 7 et 8 dans le CSS.
4
5
6
7
8
9
10
11
|
html {
font-size:100%;
background-color:#444;
background:url("images/bg.png");
background-repeat:repeat;
margin:0;
padding:0
} |
Remarquer background-repeat:repeat. Les motifs sont répétés vers la droite et vers le bas quelque soit la longueur du document.
Il y a quatre possibilités de répéter une image :
- background-repeat:no-repeat (L'image n'est pas répétée).
- background-repeat:repeat (pour répéter l'image vers la droite et vers le bas.)
- background-repeat:repeat-y (pour répéter l'image uniquement vers le bas.)
- background-repeat:repeat-x (pour répéter l'image uniquement vers la droite.)
Assurez-vous que la couleur de l'arrière-plan soit le plus près possible de la couleur du calque. Il arrive, pour toute sorte de raison, qu'une image ne s'affiche pas. Si votre texte est blanc et bien visible sur un calque foncé, il sera invisible si la couleur derrière le calque est blanche et que le calque ne s'affiche pas.
Si vous choisissez utiliser qu'une couleur comme arrière-plan, supprimer les lignes 7 et 8.
Image en arrière-plan
Vous pouvez aussi insérer une image ou un calque au lieu des motifs. Cette procédure est très gourmande en ressource système et peut causer des délais de téléchargement au visiteur, mais offre beaucoup de possibilités et d'esthétisme à votre site.
Télécharger l'arrière plan
 |
|---|
| Type : Archive WinRar. |
| Taille : 484 octets. |
| Téléchargement |
Comme le corps de notre model est centré et que le calque ne doit pas être répéter, nous allons modifier le CSS en conséquence.
Pour profiter pleinement de l’effet visuel de l’image ou du calque, il est préférable que votre écran soit plus large que 1024 puisqu’il ne restera que peu d’espace de chaque coté de la page.
Copier et remplacer les lignes 4 et 10 dans le CSS.
4
5
6
7
8
9
10
|
html {
font-size:100%;
background-color:#000;
background:url("images/bg.png") no-repeat center top fixed;
margin:0;
padding:0
} |
Les paramètres du calque :
- Le calque n'est pas répéter avec no-repeat.
- Le calque est center avec center.
- Le calque est aligner dans le haut de la fenêtre avec top.
- Le calque sera fixe même en défilant la page avec fixed.
Il ne vous reste plus qu’à ajuster la largeur de la page de <body> pour réussir l’agencement sur la ligne 20 avec 944px.
L'arrière-plan pour le conteneur <body>
Il faut essentiellement suivre les mêmes étapes que pour la balise <html>. Gardez cependant à l'esprit que si vous avez choisi un motif comme arrière-plan pour <html> et que vous choisissez aussi un motif pour <body>, votre page sera non seulement plus longue à charger, mais saturera l'affichage de détail inutile puisqu'il n'y a qu'une valeur esthétique aux arrières-plans.
Choisissez donc une couleur pour la balise <html> et un motif pour la balise <body> ou, au contraire, un motif pour la balise <html> et une couleur pour la balise <body>.
Pour personnaliser la couleur, choisissez une couleur ici puis par copie/coller, insérer le code alpha numérique à la place de ffffff sur la ligne 17.
Si vous choisissez un calque, suivez la même procédure que pour la balise HTML mentionné plus haut.
Copier et remplacer les lignes 18 et 19 dans le CSS.
13
14
15
16
17
18
19
20
21
22
23
24
|
body {
color:#000;
font-size:.9em;
font-family:Arial, Helvetica, sans-serif;
background-color:#ffffff;
background:url("images/bg-body.png");
background-repeat:repeat
width:800px;
height:100%;
margin:0;
margin:auto;
} |
Optimiser son CSS
Dans notre modèle nous avons utilisé trois lignes pour l'arrière-plan :
background-color:#ffffff.
background:url("images/bg.png").
background-repeat:repeat.
Vous avez la possibilité, en fait, vous devriez plutôt vous habituez à écrire les paramètres de background ainsi :
background:#fff url("images/bg.png") repeat;
Pour plus d'information sur la façon d'optimiser le CSS, consulter la rubrique « Optimiser votre CSS ».
Si vous choisissez utiliser qu'une couleur comme arrière-plan, supprimer les lignes 18 et 19.
Ajouter ce site à vos favoris
