La propriété de style CSS : background

Propriété d'arriere plan ou de fond

Somaire

Propriété css : background ( le fond ou arrière-plan)

Le fond ne désigne pas forcément le fond de toute une page web. On peut aussi appliquer un fond uniquement aux titres, ou aux paragraphes, ou encore à certains mots d'un paragraphe.
Il existe 2 types de fonds :
Les fonds comportant une couleur
Les fonds comportant une image de fond

La couleur de fond

On utilise la propriété CSS background-color.
Elle s'utilise comme la propriété color, vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou utiliser la méthode RGB.
Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. <body> correspond à toute la page web, c'est donc en modifiant sa couleur de fond que l'on changera la couleur de fond de la page web. Code : CSS

Sélectionner le code

	body 
	{
	   background-color:yellow; 
	   color: black; 
	}
	
 

En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur de cette balise prendront le même style c'est ce qu'on appelle l'héritage..
On dit que les balises qui se trouvent à l'intérieur d'une autre balise "héritent" de ses propriétés.
Mai si vous dites par la suite que vous voulez vos titres en noir, ce style aura la priorité et vos titres seront donc en noir.
Cela ne fonctionne pas uniquement pour la couleur, entendons-nous bien. Toutes les propriétés CSS seront héritées : vous pouvez par exemple demander une taille de texte de "1.3em" dans la balise <body>, et tous vos titres et paragraphes seront de cette taille-là.

Un exemple où je vous montre comment on "annule" l'héritage
Code : CSS

Sélectionner le code

	body
	{
	   background-color: #000000; 
	   color: #FFFFFF; 
	}
	h1
	{
	   color: #FF0000; 
	}
	
 

On n'a pas indiqué de couleur particulière pour les paragraphes (<p>), donc ils ont hérité de la couleur blanche. Mai le titre n'a pas hérité de la couleur blanche car on a écrit qu'on voulait qu'il soit en rouge.

L'image de fond

Tout comme pour la couleur de fond, l'image de fond ne s'applique pas forcément à la page entière, on peut tout aussi bien mettre une image de fond aux titres, paragraphes, citations etc...
La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit lui mettre url("nom_de_l_image.png"). Par exemple :
background-image:url("fond.png");
On peut aussi mettre JPEG ou GIF.

L'adresse indiquant où se trouve l'image de fond peut être en absolu (http://...) ou en relatif (fond.png).
Attention lorsque vous mettez une adresse en relatif dans le fichier CSS ! elle doit être indiquée par rapport au fichier .css et non pas par rapport au fichier .html.
Ainsi, si votre site comporte 2 dossiers : "css" et "images", il vous faudra taper : "../images1/fond.png" pour récupérer l'image de fond. Si le chemin n'est pas correct, votre image de fond ne s'affichera pas.
Si on veut appliquer une image de fond à toute la page, on doit là encore utiliser la balise <body> :
Code : CSS

Sélectionner le code

	body
	{
	   background-image: url("../images1/fond.png");
	}
	h1
	{
	   font-style: italic; 
	   font-family: "Arial Black", Arial, Verdana, serif; 
	   text-align: center; 
	}
	blockquote p
	{
	   text-align: justify; 
	   text-indent: 25px; 
	}
	
 

Il existe par ailleurs une propriété CSS qui permet de "fixer" le fond, pour ne pas bouger en même temps que le texte. L'effet obtenu est intéressant.
La propriété est background-attachment et peut prendre 2 valeurs :
fixed : l'image de fond reste fixe.
scroll : l'image de fond défile avec le texte (par défaut).
En réutilisant le même fichier XHTML que tout à l'heure, mais en changeant un peu le CSS pour y rajouter background-attachment, on obtient ceci :
Code : CSS

Sélectionner le code

	 body
	{
	   background-image: url("../images1/neige.png");
	   background-attachment: fixed; /* Le fond restera fixe */
	}
	h1
	{
	   font-style: italic; 
	   font-family: "Arial Black", Arial, Verdana, serif; 
	   text-align: center; 
	}
	blockquote p
	{
	   text-align: justify; 
	   text-indent: 25px; 
	}
	
 

Essayez de descendre plus bas dans la page avec les barres de défilement, vous verrez que le fond reste fixe
Il y a 2 propriétés en rapport avec les images de fond

1. Celle qui gère la répétition de l'image de fond. Cette propriété s'appelle
background-repeat ses valeurs sont:
no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
repeat : le fond sera répété (par défaut).
Gardons encore notre même fichier XHTML.
Code : CSS

Sélectionner le code

	body
	{
	   background-image: url("../images1/fond.png");
	   background-repeat: repeat-y;  
	}
	
 

2. Concernant la position de l'image de fond.
On peut indiquer où doit se trouver l'image de fond avec background-position. Cette propriété n'est intéressante que si vous avez mis "background-repeat: no-repeat;" (un fond qui ne se répète pas).
C'est background-position elle a 2 valeurs en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page (ou du paragraphe si vous appliquez le fond à un paragraphe). Ainsi, si vous tapez :
background-position:20px 70px;
... votre fond sera placé à 20 pixels de la gauche et à 70 pixels du haut. Il est aussi possible de mettre ces valeurs en anglais :
top : en haut.
bottom : en bas.
left : à gauche.
center : centré.
right : à droite.
Il est possible de combiner ces mots. Par exemple, pour aligner une image à gauche en haut, vous taperez :background-position: left top;
Code : CSS

Sélectionner le code

	 body
	{
	   background-image: url("../images1/fond.jpeg"); 
	   background-repeat: no-repeat; 
	   background-position: left top; 
	   background-attachment: fixed; 
	}
	
 

Si vous utilisez beaucoup de propriétés en rapport avec le background , vous pouvez utiliser ce que moi j'appelle "grande-propriété" background qui peut prendre plusieurs valeurs combinées des propriétés background-image, background-repeat, background-attachment et background-position.
C'est la première "grande-propriété" que nous utilisons, Pour toutes les "grande-propriétés" comme background, il faut savoir que :
L'ordre des valeurs n'a pas d'importance. Vous pouvez combiner les valeurs dans n'importe quel ordre :
background: url("../images1/image1.gif") no-repeat top right fixed;
background: no-repeat fixed top right url("../images1/image1.gif");
Vous n'êtes pas obligés de mettre toutes les valeurs.
background:url("../images1/image1.gif") no-repeat top right;
L'exemple ci-dessous donne le même résultat que l'exemple précédent, mais il utilise background pour combiner les valeurs et rendre le fichier CSS plus petit :
Code : CSS

Sélectionner le code

	body
	{
	   background: url("../images1/image1.gif") no-repeat top right fixed; 
	}
	
 

Vous pouvez appliquez un fond à vos titres ou paragraphes, mai pas seulement à la page. Ce cours en cnss est terminé, nous avons maintenant la base qui nous permettra de créer des pages Web acceptables. Mai il nous reste encore plein de choses à voir comme les tableaux, les formulaires etc...


chapitre précédent chapitre suivant