Attributs de mise en forme de l'arrière-plan
Voici quelques attributs utiles pour ceux qui veulent ou voudront un jour faire quelques manip' pour modifier le fond de leur blogger
background
Pour définir la couleur du fond de la page
Elle s'intègrera alors dans la feuille de style lors de la définition du corps de la page (body) dans la section "/* global"
Pour colorier le fond d'un paragraphe, une ligne ou une partie de texte
Dans ce cas l'attribut sera inséré dans la partie "body" du code source de votre page et sera associé à une balise :
- "p" pour colorier un paragraphe ou une ligne, une phrase :
- pour colorier une partie d'un texte:
background
Pour définir la couleur du fond de la page
Elle s'intègrera alors dans la feuille de style lors de la définition du corps de la page (body) dans la section "/* global"
Pour colorier le fond d'un paragraphe, une ligne ou une partie de texte
Dans ce cas l'attribut sera inséré dans la partie "body" du code source de votre page et sera associé à une balise :
- "p" pour colorier un paragraphe ou une ligne, une phrase :
<p style="background-color: la valeur de la couleur;"> le texte à colorier;</p> - pour colorier une partie d'un texte:
<span style="background: valeur de la couleur";>le texte à colorier</span>background-image
Avant toute chose, il faut héberger l'image sur un serveur web (qui fait l'objet d'un billet spécifique).
Pour placer une image en fond de page
L'attribut sera défini dans la mise en forme générale de la page, c'est-à-dire la mise en forme "body" de la section "global". Généralement cette mise en forme figure en tête du modèle.
Comme c'est une image (gif ou jpg), on utilisera son adresse (url). L'attribut s'écrira alors:
background: url(adresse de votre image);
attention :
- ne mettez pas d'espace entre url et (
- pensez également à définir une couleur pour les internautes qui auraient des problèmes avec leur navigateur.
background-repeat
Pour répéter une image en fond de page
L'image que vous utilisez est bien souvent trop petite par rapport à la taille de la page, c'est le cas notamment des fichiers de texture. L'astuce consiste donc à faire répéter l'image.
Les valeurs utilisées :
- repeat : l'image se répète horizontalement et verticalement
- no-repeat : l'image n'est affichée qu'une fois (valeur par défaut)
- repeat-x : répéter horizontalement
- repeat-y : répéter verticalement
on écrira alors l'attribut :
background: url(adresse de l'image) la valeur de repeat;
Compte tenu de l'utilisation d'image en bordure, il faudra également penser à créer des marges pour le texte si celui-ci est rogné. L'attribut utilisé sera alors "margin" (vu dans le billet "marges et bordures").
background-attachment
L'image que vous utilisez est bien souvent trop petite par rapport à la taille de la page, c'est le cas notamment des fichiers de texture. L'astuce consiste donc à faire répéter l'image.
Les valeurs utilisées :
- repeat : l'image se répète horizontalement et verticalement
- no-repeat : l'image n'est affichée qu'une fois (valeur par défaut)
- repeat-x : répéter horizontalement
- repeat-y : répéter verticalement
on écrira alors l'attribut :
background: url(adresse de l'image) la valeur de repeat;
Compte tenu de l'utilisation d'image en bordure, il faudra également penser à créer des marges pour le texte si celui-ci est rogné. L'attribut utilisé sera alors "margin" (vu dans le billet "marges et bordures").
background-attachment
Il permet de définir si une image doit rester fixe ou non lorsque l'internaute fait défiler la page.
Par défaut, le paramètre est "scroll". Autrement dit, quand vous faites défiler la page, l'image disparaît au fur et à mesure.
Pour que l'image reste à son emplacement lors du défilement de la page, il suffit de spécifier dans la mise en forme :
background-attachment: url(adresse de l'image) fixed;
background-position
Par défaut, le paramètre est "scroll". Autrement dit, quand vous faites défiler la page, l'image disparaît au fur et à mesure.
Pour que l'image reste à son emplacement lors du défilement de la page, il suffit de spécifier dans la mise en forme :
background-attachment: url(adresse de l'image) fixed;
background-position
Pour définir avec précision l'emplacement d'une image dans une page qui par défaut sera toujours en haut à gauche.
Les valeurs peuvent être exprimé en pourcentage ou en valeur relative (top, center, bottom, right, left)
Aussi pour une image :
en haut, à gauche : top left ou 0% 0%
en haut, centré : top center ou 0% 50 %
en haut, à droite : top right ou 0% 100%
centre, gauche : center left ou 50% 0%
centre, centre : center center ou 50% 50%
centre, droite : center right ou 50% 100%
bas, gauche : bottom left ou 100% 0%
bas, centre : bottom center ou 100% 50%
bas, droite : bottom right ou 100% 100%