L' arrière-plan
(suite à la demande d'Elly)Voici un tutoriel pour en apprendre plus sur les fonds/arrières-plan. Ces derniers peuvent s'appliquer à des paragraphes, des textes, des pages web entières... Bref, tout ce qui est une balise HTML.
01. La propriété CSS pour
appliquer une couleur de fond est
background-color. Vous pouvez écrire sa valeur en utilisant le nom de la couleur en anglais, la notation hexadécimale, ou en utilisant la méthode RGB.
- Code:
-
body
{
background-color: #FFFFFF;
}
Ici, le fond de toute la page web (body) sera blanc (#FFFFFF).
02. La propriété CSS pour
appliquer une image de fond est
background-image. Il faut lui mettre
url('url_du_fond') comme valeur.
- Code:
-
i
{
background-image: url('http://obsession27.free.fr/divers/fonds/fl2.gif');
}
Ici, le fond de tous les textes/mots en italiques (i) auront cette image de fond.
03. La propriété pour
gérer la répétition de l'image de fond est
background-repeat. Elle peut seulement être utilisée sur des balises de
type block. Voici les valeurs qu'elle peut prendre ;
repeat : le fond sera répété (par défaut)
no-repeat : le fond ne sera pas répété
repeat-x : le fond sera répété horizontalement.
repeat-y : le fond sera répété verticalement.
- Code:
-
body
{
background-image: url('http://obsession27.free.fr/divers/fonds/fl2.gif');
background-repeat: repeat-y;
}
Ici, le fond de toute la page web (body) aura cette image de fond
répétée verticalement.
04. La propriété pour
fixer une image de fond est
background-attachment. Elle peut seulement être utilisée sur des balises de
type block. Voici les valeurs qu'elle peut prendre ;
scroll : le fond défile (avec le texte) ; (par défaut)
fixed : le fond est fixe et le texte passe par dessus
- Code:
-
body
{
background-image: url('http://obsession27.free.fr/divers/fonds/fl2.gif');
background-repeat: repeat-y;
background-attachment: fixed;
}
Ici, le fond de toute la page web (body) aura cette image de fond
fixe.
background-attachment: fixed;
05. La propriété concernant
la position de l'image de fond est
background-position (il faudrait que votre fond soit fixe pour que celle-ci soit efficace). Il y a deux manières pour indiquer la position ;
• On utilise deux valeurs en pixels (le premier pour le nombre de pixels entre la partie gauche de la page et le fond | le second pour le nombre de pixels entre le haut de la page et le fond).
Exemple : background-position: 10px 20px; indique que votre fond sera décalé de 10 pixels sur la droite et de 20 pixels vers le bas.
• On utilise une ou deux valeurs en anglais (
top, bottom, right, left soit haut, bas, droite, gauche).
Exemple : background-position: top right; indique que votre fond sera placé en haut à droite.
05. | Et comment mettre un fond en Html ? |
Hum il n'y a pas de balise qui donne un fond à ma connaissance, mais il y a un attribut (bgcolor) utilisable sur une
balise. Vous pouvez aussi utiliser l'attribut
style et donner le CSS.
- Code:
-
<body bgcolor="#FFFFFF">
<body style="background-color: #FFFFFF;">
Deux manières de mettre le fond de la page complète (body) en blanc (#FFFFFF).
& Pour insérer une image de fond ce sera :
- Code:
-
<body background="URL">
<body style="background-image: url('URL');">
Et voilà ! En espérant que cela vous serve \o/
Par Stelyne pour Yume Artists © 2011
Sujet: (CSS) L' arrière-plan 
Dim 9 Oct - 11:48
