Arrière plan

Pour chacune de vos pages, vous pouvez définir un fond de couleur, voire une image en arrière plan.

Code pour une couleur en fond

body {

background-color : purple;

}

Code pour une image en arrière plan

body {

background-image : url(../Images/FondEcran.gif);

background-repeat : no-repeat;

background-attachment : fixed;

}

background-repeat permet ou non de répéter le motif suivant que la taille de l'image est suffisante pour couvrir tout l'écran ou non.

background-attachment permet de fixer afin que le texte défile sur l'image lorsque l'internaute utilise les ascenseurs.

Code pour la page en général

Dans le body, vous pouvez inclure d'autres attributs valables pour chaque page d'une manière globale :

body {

font-family : Georgia, Verdana, times;

text-align : justify;

font-size : 12pt;

margin-left : 60px;

margin-right : 50px;

}

Plusieurs arrières-plans

Dans le cas d'une utilisation de plusieurs arrières-plans différents au sein d'un même site, il est préconisé de créer une feuille de style pour l'aspect général hormis l'attribut body. Ensuite seront créés autant de fichiers CSS avec l'attribut body que d'arrières-plans désirés.

Fichier_1.htm

<html>

<head>

<link rel="stylesheet" type="text/css" href="../css/general.css">

<link rel="stylesheet" type="text/css" href="../css/fond_hiver.css">

<title>Les vacances d'hiver</title>

</head>

 

<body>

corps du document

</body>

</html>

Fichier_2.htm

<html>

<head>

<link rel="stylesheet" type="text/css" href="../css/general.css">

<link rel="stylesheet" type="text/css" href="../css/fond_ete.css">

<title>Les vacances d'été</title>

</head>

 

<body>

corps du document

</body>

</html>

fond_hiver.css

body {

background-image : url(../Images/Grand_Bornand.jpg);

...

}

fond_ete.css

body {

background-image : url(../Images/Porquerolles.gif);

...

}